使用jsPDF添加圆角图片答案

【问题标题】：Use jsPDF to add a rounded image使用jsPDF添加圆角图片
【发布时间】：2020-05-10 02:58:14
【问题描述】：

我正在使用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有一个“剪辑”功能，但我不知道如何使用它。我可以以某种方式添加我的图像，然后用圆圈剪辑它吗？

【问题讨论】：

标签： javascript image jspdf

【解决方案1】：

我有一个技巧，可以通过简单地使用图像和圆圈在 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 中尝试此代码，然后根据您的需要实现该想法。

【讨论】：