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

所以我得到了一个项目，用户可以根据他们的输入生成pdf。使用

jspdf

库生成PDF文件。但问题是，用户可以上传个人资料图片，我希望显示圆角或完全圆角的图像（边界半径

为50%）。由于在
jspdf
或据我所知的任何其他库（
pfdkit
，
pdfmake
）中没有一个本机函数允许此操作，因此我正在寻找一种在生成
pdf
之前修改图像的方法

我已经试过使用
html2canvas
，实际上效果很好。当用户在移动设备上时，html2canvas出现问题。由于图像的
宽度
和
高度
被调整为屏幕大小（两者都约为
35px
），因此使用
html2canvas
拍摄快照，然后在宽度和高度为100px的pdf中显示，图像明显变得模糊

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

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

只是为了澄清，简单地向图像添加CSS属性是没有帮助的
jspdf
只使用
img
标记中的图像，没有任何css属性
 我建议您在生成pdf之前向图像中添加一个类，并在css中定义该类的规则：

.circle {
  border-radius: 50%;
}

或者，即使您可能需要强制，以防已经有带有某些边框半径值的css添加到img标记：

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

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

.circle {
  border-radius: 50%;
}

或者，即使您可能需要强制，以防已经有带有某些边框半径值的css添加到img标记：

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

可以在jspdf上使用圆角图像，如果已经调整了大小，则只需在将图像添加到PDF之前对图像应用圆角度即可

roundeImage
取自：

例如（不适用于SO，因此没有演示）：


* {
保证金：0；
填充：0；
}
身体{
背景：#ccc；
}
#pdf{
显示：块；
位置：绝对位置；
底部：0；
宽度：100vw；
高度：100vh；
}
函数圆形图像（ctx、x、y、宽度、高度、半径）{
ctx.beginPath（）；
ctx.移动到（x+半径，y）；
ctx.lineTo（x+宽度-半径，y）；
ctx.直角曲线（x+宽度，y，x+宽度，y+半径）；
ctx.lineTo（x+宽度，y+高度-半径）；
四次曲线(
x+宽度，
y+高度，
x+宽度-半径，
y+高度
);
ctx.lineTo（x+半径，y+高度）；
ctx.直角曲线（x，y+高度，x，y+高度-半径）；
ctx.lineTo（x，y+半径）；
ctx.二次曲线（x，y，x+半径，y）；
ctx.closePath（）；
}
var img=新图像（）；
img.src=”https://graph.facebook.com/649650002/picture?type=square";
img.setAttribute（“交叉源”、“匿名”）；
img.onload=函数（）{
//
const canvas=document.createElement（“canvas”）；
canvas.width=img.width；
canvas.height=img.height；
const ctx=canvas.getContext（“2d”）；
圆形图像（ctx，0，0，50，50，5）；
ctx.clip（）；
ctx.drawImage（img，0，0，img.width，img.height）；
ctx.restore（）；
//默认导出为a4纸张，纵向，单位为毫米
var doc=new jsPDF（）；
文件文本（“呜呜！。圆角。”，10，15）；
doc.addImage（canvas.toDataURL（“image/png”），“png”，15,25,30,30）；
document.getElementById（“pdf”）.src=doc.output(
“dataurlstring”，
“its-a.pdf”
);
};
可以在jspdf上使用舍入图像，如果已经调整大小，则只需在将图像添加到PDF之前对图像应用舍入度即可

roundeImage
取自：

例如（不适用于SO，因此没有演示）：


* {
保证金：0；
填充：0；
}
身体{
背景：#ccc；
}
#pdf{
显示：块；
位置：绝对位置；
底部：0；
宽度：100vw；
高度：100vh；
}
函数圆形图像（ctx、x、y、宽度、高度、半径）{
ctx.beginPath（）；
ctx.移动到（x+半径，y）；
ctx.lineTo（x+宽度-半径，y）；
ctx.直角曲线（x+宽度，y，x+宽度，y+半径）；
ctx.lineTo（x+宽度，y+高度-半径）；
四次曲线(
x+宽度，
y+高度，
x+宽度-半径，
y+高度
);
ctx.lineTo（x+半径，y+高度）；
ctx.直角曲线（x，y+高度，x，y+高度-半径）；
ctx.lineTo（x，y+半径）；
ctx.二次曲线（x，y，x+半径，y）；
ctx.closePath（）；
}
var img=新图像（）；
img.src=”https://graph.facebook.com/649650002/picture?type=square";
img.setAttribute（“交叉源”、“匿名”）；
img.onload=函数（）{
//
const canvas=document.createElement（“canvas”）；
canvas.width=img.width；
canvas.height=img.height；
const ctx=canvas.getContext（“2d”）；
圆形图像（ctx，0，0，50，50，5）；
ctx.clip（）；
ctx.drawImage（img，0，0，img.width，img.height）；
ctx.restore（）；
//默认导出为a4纸张，纵向，单位为毫米
var doc=new jsPDF（）；
文件文本（“呜呜！。圆角。”，10，15）；
addImage博士（加拿大）