使用canvg从svg转换而来的画布上渲染的图像模糊

Question

我使用canvg将svg元素渲染到画布上，并使用jspdf下载它。下面是我的代码：

svgElement = jQuery('#svg');

canvas = jQuery('<canvas />').attr({
    width: svgElement.width(),
    height: svgElement.height()
}).get(0);
ctx = canvas.getContext("2d");  

canvg(canvas, svgElement.outerHTML(), {ignoreMouse: true, ignoreAnimation: true});

imgData = canvas.toDataURL("image/png");
pdf = new jsPDF('landscape' , 'pt', [svgElement.height(), svgElement.width()]);
pdf.addImage(imgData, 'PNG', 0, 0);     
pdf.save('download.pdf');

但pdf上的图像看起来很模糊，没有原始图像那么清晰(忽略背景差异)：

​

​

​

我认为这可能是由于canvg将svg渲染到画布上的步骤造成的。但我不知道怎么修，有人能帮上忙吗？

Answer 1

你试过使用svgToPdf.js吗？你可以使用这个库跳过一个步骤，这样图像就会更清晰。

以下是github存储库：

https://github.com/CBiX/svgToPdf.js