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之前在图像中添加一个类，并在CSS中为该类定义规则：

.circle {
  border-radius: 50%;
}

或者，即使您已经需要在img标签中添加具有某些边框半径值的css，也可以强制使用

.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

如果有人出于任何原因在这篇博文中跌跌撞撞，我实际上就实现了期望的结果。就像我说的那样，用户可以上传图片，并且我想显示带有圆角或边框半径为50％的图片。无论如何，在将图像预览（和上传）到我的网站之前，用户必须使用autocommit裁剪图像。然后，他们可以自己决定是否要显示带有圆角或边界半径为50％的图像。我认为这极大地促进了用户体验和最终结果。

有没有一种方法可以使用Javascript修改图片？

3 个答案: