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

Question

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

我已经尝试使用html2canvas，实际上效果很好。当用户使用移动设备时，html2canvas 就会出现问题。由于图像的宽度和高度会根据屏幕尺寸进行调整(两者都在35px左右)，因此使用拍摄快照>html2canvas 然后以宽度和高度为 100px 的 pdf 形式显示，图像显然变得模糊。

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

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

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

Answer 1

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

.circle {
  border-radius: 50%;
}

或者，即使你可能需要强制，以防已经有带有一些 border-radius 值的 css 到 img 标签:

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