有没有办法用 Javascript 修改图像？

Question

所以我得到了一个项目，用户可以在其中根据他们的输入生成 pdf。使用 jspdf 库生成 PDF 文件。问题是，用户可以上传个人资料图片，我想用圆角或全圆角显示该图片（border-radius 为 50%）。由于 jspdf 或据我所知的任何其他库 (pfdkit、pdfmake) 中没有允许此操作的本机函数，因此我正在寻找一种修改图像的方法在生成 pdf 之前。

我已经尝试使用 html2canvas，实际上效果很好。 html2canvas 的问题发生在用户使用移动设备时。由于图像的 width 和 height 已调整为屏幕大小（均在 35px 左右），因此使用 html2canvas 进行快照，然后将其显示在宽度和高度为 100px 的 pdf，图像显然变得模糊。

所以理想情况下，在使用 jspdf 生成 PDF 文件之前，我需要一些东西来编辑原始图像或其他东西。

任何其他能让我更接近解决方案的想法也非常感谢。

澄清一下，简单地向图像添加 CSS 属性没有帮助。 jspdf 只使用 img 标签中的图像，没有任何 css 属性。

Answer 1

我建议您在生成 pdf 之前向图像添加一个 class，并在 css:

中定义 class 的规则

.circle {
  border-radius: 50%;
}

或者，如果 img 标签已经 css 有一些 border-radius 值，您甚至可能需要强制：

.circle {
  border-radius: 50% !important;
}

Answer 2

可以在 jspdf 上使用圆角图像，如果您已经调整大小并且有上下文，您只需要在将图像添加到 PDF 之前将圆角应用到图像。

roundedImage 摘自：Canvas drawimage with round corners

例如（不会在 SO 上工作，所以没有演示）：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8" />

    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: #ccc;
      }
      #pdf {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <embed id="pdf" src="#" type="application/pdf" width="100%" height="100%" />
    <script>
      function roundedImage(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(
          x + width,
          y + height,
          x + width - radius,
          y + height
        );
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
      }

      var img = new Image();
      img.src = "https://graph.facebook.com/649650002/picture?type=square";
      img.setAttribute("crossorigin", "anonymous");

      img.onload = function() {
        //
        const canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext("2d");

        roundedImage(ctx, 0, 0, 50, 50, 5);
        ctx.clip();
        ctx.drawImage(img, 0, 0, img.width, img.height);
        ctx.restore();

        // Default export is a4 paper, portrait, using milimeters for units
        var doc = new jsPDF();

        doc.text("woop!..rounded corners.", 10, 15);
        doc.addImage(canvas.toDataURL("image/png"), "PNG", 15, 25, 30, 30);

        document.getElementById("pdf").src = doc.output(
          "dataurlstring",
          "its-a.pdf"
        );
      };
    </script>
  </body>
</html>

Answer 3

如果有人出于某种原因偶然发现了这个 post，我实际上已经达到了我想要的结果。正如我所说，用户可以上传一张图片，我想用圆角或 50% 的边框半径显示该图片。无论如何，在预览（和上传）图像到我的网站之前，用户必须使用 cropperjs 裁剪图像。然后，他们可以自己决定是要显示带圆角还是带 50% 边框半径的图像。我认为这极大地提升了用户体验和我的最终结果。

有没有办法用 Javascript 修改图像？

Is there a way to modify an Image with Javascript?

javascript

image

html2canvas

jspdf