изображение, отображаемое на холсте, преобразованное из svg с использованием canvg, размыто

Я использую 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 выглядит размытым, не таким четким и четким, как исходное (просто игнорируйте разницу фона): Original

canvg

Я думаю, что это, вероятно, вызвано шагом, который может отображать SVG на холсте. Но я не знаю, как это исправить, кто-нибудь может помочь?


svg png html5-canvas blurry canvg
person Aaron Shen    schedule 08.01.2015    source источник
comment
Вы когда-нибудь определяли, почему изображение получается размытым? Я вижу то же самое при использовании canvg для преобразования моих диаграмм из svg в canvas в jpeg.   -  person Stephen    schedule 28.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы пробовали использовать svgToPdf.js? Вы, вероятно, могли бы пропустить шаг, используя эту библиотеку, и изображение могло бы стать более четким.

Вот репозиторий на гитхабе:

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

person Lesram    schedule 19.07.2015