CODEWITHSUNDEEP
pdfjspdf
Arjun Mudhaliyar
Arjun Mudhaliyar

Reputation: 176

How to enhance the quality jsPDF output?

I'm using jsPDF (https://github.com/MrRio/jsPDF) to generate PDF out of web instance. The quality of the PDF output is lesser than the actual web instance. I have tried setting the image quality to 1 in the canvas.toDataURL(type, encoderOptions); but it didn't help. Is this a known issue? I'm using the addImage() method to put the image on the pdf before saving it. Example: enter image description here

Upvotes: 0

Views: 2375

Answers (1)

wizzwizz4
wizzwizz4

Reputation: 6426

If you can inject JavaScript into your web instance before the images are drawn and the images are drawn onto a canvas, you could fix your problem by capturing the vector instructions used to make up the images.

  1. Convert the canvas to SVG using canvas2svg.js: Method to convert HTML5 canvas to SVG?

    You create a mock canvas 2D context and then generate an SVG scene graph as you call canvas drawing commands. [...] You can't actually "transform" a canvas element that's been drawn to, as it's just a bitmap, so keep that in mind.

  2. Add the SVG to the PDF document using jspdf.plugin.sillysvgrenderer.js: How to create easily a PDF from a SVG with jsPDF?
    Note: this has limitations, so might not work properly.

This will add the images as native PDF objects.

Upvotes: 1

Related Questions