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

【问题标题】：Is there a way to modify an Image with Javascript?有没有办法用 Javascript 修改图像？
【发布时间】：2020-03-03 07:10:00
【问题描述】：

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

我已经尝试过使用html2canvas，实际上效果很好。 html2canvas 的问题发生在用户使用手机时。由于图像的width 和height 已调整为屏幕尺寸（两者都在35px 附近），因此使用html2canvas 拍摄快照，然后以宽度和高度为100px 的pdf 显示，图像显然变得模糊。

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

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

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

【问题讨论】：

不要对 dom 上显示的内容进行快照，而是在原始图像的背景中调整大小，然后将其用于 pdf
Javascript Rounded Corners for Images的可能重复
截图是基于DOM的，所以不幸的是图片必须在屏幕上。我试过将图像放在屏幕外并拍摄快照。结果得到了一张空白图片。
Canvas drawimage with round corners的可能重复

标签： javascript image jspdf html2canvas

【解决方案1】：

我建议您在生成 pdf 之前为图像添加一个类并在 css 中为该类定义规则：

.circle {
  border-radius: 50%;
}

或者，即使你可能需要强制，以防 img 标签已经有一些边框半径值的 css：

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

【讨论】：

我知道我可以显示带有img 标签并使用border-radius 制作圆角的图像。但是在生成pdf时，它没有考虑css。它只显示整个图像，未修改。这就是为什么我需要在用它生成 pdf 之前对其进行某种真正的修改。
那我必须说对不起。因为，我们无法仅使用 html 来做这样的事情。
是的，我是这么想的，呵呵。这有点远。

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：