Exporting canvas to a high-res PDF

Questions
1

Hi,

There are many articles on the web on how to export a Three.js scene to a PNG/JPG image.

Is there a way to also export the scene into a PDF (preferably high res) file? Is it possible to do this using JSPDF library?

Let me know if this is possible. Any help would be invaluable.

Thanks
Srinivas

2

The basic workflow seems to work just fine: Edit fiddle - JSFiddle - Code Playground

The relevant code section is:

var imgData = renderer.domElement.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save('download.pdf');
2 Likes
3

Hi Michael,

I can’t thank you enough for this jsfiddle. This should work perfectly for me.

I am accepting your solution.

Regards,
Srinivas

4

Is it actually stored as base64? That would get quite large for high resolution images ^^

Edit: nevermind https://raw.githack.com/MrRio/jsPDF/master/docs/module-addImage.html#~addImage

5

Hi Michael,

I have tried this solution and it works, but only partially at the moment.

My renderer size is set to window width/height but when I download the pdf I only get 1/3 the content of the canvas printed to the PDF file. I tried a bunch of things but am not able to print the full canvas content at the moment.

What could be going wrong here? Is there anything that I should be looking at particularly? Let me know if you need any more information.

Thanks
Srinivas

6

Sorry, I’m not familiar with jsPDF. Since your question is unrelated to three.js, I suggest you ask at the jsPDF community. Especially since you will have the same issue no matter how you draw onto a canvas.