CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
justin
justin

Reputation: 141

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.

Upvotes: 14

Views: 47027

Answers (1)

Razan Paul
Razan Paul

Reputation: 13868

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.

Upvotes: 23

Related Questions