0

I'm using canvg to render svg elements onto a canvas and download it using jspdf. below is my code:

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');

But the image on pdf looks blur, not as sharp and clear as the original one( just ignore the background difference): Original

canvg

I think it's probably caused by the step that canvg render svg onto canvas. But I don't know how to fix it, anybody can help?

Aaron Shen
  • 8,124
  • 10
  • 44
  • 86
  • Did you ever determine why the image was coming out blurry? I am seeing the same thing when using canvg to convert my charts from svg to canvas to jpeg.. – Stephen Apr 28 '16 at 16:02

1 Answers1

0

Have you tried using svgToPdf.js ? You could probably skip a step using this library and the image could come out clearer.

Here is the github repo:

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

Lesram
  • 15
  • 2