使用jsPDF添加圆角图像
使用jsPDF添加圆角图像
提问于 2020-01-23 18:48:31
我正在使用jsPDF库向我的PDF文档添加一个图像：
loadImageFromURL(URL, function (image) {
document.circle(20, 20, 10, 'S');
document.addImage(image, 'JPEG', 20, 20);
});
function loadImageFromURL(URL, callback) {
var image = new Image();
image.src = URL;
image.onload = function () {
callback(image);
};
}问题是，在添加图像之前，我想要在创建的圆圈中匹配图像。我如何将我的图像转换成一个圆圈，并将它放入我的前一个圆圈中？
我试图：
image.style.borderRadius = "50%";但这没有任何效果。我怎样才能把我的图像切成一个圆圈呢？
编辑：
经过一些研究，我发现jsPDF不接受样式。我还发现jsPDF有一个“剪辑”函数，但我不知道如何使用它。我可以以某种方式添加我的图像，然后用一个圆圈剪辑它吗？
回答 1
Stack Overflow用户
发布于 2021-01-20 12:09:32
通过简单地使用图像和圆圈，我可以在jspdf库中获得一个圆形图像。
//First I Created Background from Rectangle with some color
doc.setFillColor(94,101,121);
doc.setDrawColor(94,101,121);
doc.rect(0, 0,width, 115, 'FD');
//Secondly I take a picture in square format
doc.addImage(img, 'JPEG', 84, 9, 52, 52,3,3);
doc.setLineWidth(0);
doc.setDrawColor(0)
doc.setFillColor(255, 255, 255)
//Third,I Created a circle and increased the line width until
it covers all the corners of image in circuralar format
doc.setLineWidth(15)
doc.setDrawColor(94,101,121);
doc.setFillColor(255, 0, 0)
doc.circle(110, 35, 33, 'Fd')首先，在https://parall.ax/products/jspdf中尝试这段代码，然后根据需要实现这个想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59885311
复制相关文章
相似问题
腾讯云开发者
