Exporting canvas to a high-res PDF

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

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

Hi Michael,

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

I am accepting your solution.

Regards,
Srinivas

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

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

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.