svg - 使用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