Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/446.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用jsPDF添加圆形图像_Javascript_Image_Jspdf - Fatal编程技术网

Javascript 使用jsPDF添加圆形图像

Javascript 使用jsPDF添加圆形图像,javascript,image,jspdf,Javascript,Image,Jspdf,我正在使用库将图像添加到我的PDF文档中: 问题是,我想在添加图像之前将图像拟合到我创建的圆中。如何将图像转换为圆形,并将其与上一个圆形相匹配 我曾尝试: image.style.borderRadius = "50%"; 但这并没有产生任何效果。如何将图像裁剪成圆形 编辑: 经过一些研究,我发现jsPDF不接受样式。我还发现jsPDF有一个“clip”函数,但我不知道如何使用它。我可以添加我的图像,然后用圆圈将其剪辑吗?我有一个技巧,可以通过简单地使用图像和圆圈在jspdf库中获得圆形图像

我正在使用库将图像添加到我的PDF文档中:

问题是,我想在添加图像之前将图像拟合到我创建的圆中。如何将图像转换为圆形,并将其与上一个圆形相匹配

我曾尝试:

image.style.borderRadius = "50%";
但这并没有产生任何效果。如何将图像裁剪成圆形


编辑:


经过一些研究,我发现jsPDF不接受样式。我还发现jsPDF有一个“clip”函数,但我不知道如何使用它。我可以添加我的图像,然后用圆圈将其剪辑吗?

我有一个技巧,可以通过简单地使用图像和圆圈在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')

首先,在中尝试这段代码,然后根据需要实现这一想法。

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