HTML5畫布到PDF

Question

我正在使用HTML5並使用canvas作為設計工具。 但是，我想將我的畫布保存在一個默認為image / png的jpeg文件中，我希望以PDF格式顯示畫布的預覽。

Answer 1

一個好方法是使用jspdf.js和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/

在谷歌C​​hrome 38，IE11和Firefox 34中測試過。
對於Safari，您可能需要將圖像格式從PNG更改為JPEG。