Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 canvas to PDF

I am working in HTML5 and using canvas as a designing tool. However, I want to save my canvas in a jpeg file with a default of image/png and I want to show the preview of my canvas in a PDF.

like image 852
justin Avatar asked Oct 31 '13 05:10

justin


People also ask

Can you export canvas to PDF?

Hit CTRL-P for the Print dialog. Either select a valid printer for Destination and click the Print button OR change the Destination to either Save as PDF or Save to Google Drive (the latter will save it as a PDF) and click the Save button.


1 Answers

A good approach is to use a combination of jspdf.js and html2canvas.

<canvas id="canvas" width="480" height="320"></canvas> 
  <button id="download">Download Pdf</button>


html2canvas($("#canvas"), { onrendered: function(canvas) {         
  var imgData = canvas.toDataURL('image/png');
  var doc = new jsPDF('p', 'mm');
  doc.addImage(imgData, 'PNG', 10, 10);
  doc.save('sample-file.pdf');
  }
});

jsfiddle: http://jsfiddle.net/p4s5k59s/1222/

Tested in Google Chrome 38, IE11 and Firefox 34.
For Safari you might need to change the image format from PNG to JPEG.

like image 67
Razan Paul Avatar answered Oct 15 '22 11:10

Razan Paul