javascript - HTML5 画布转 PDF

Question

我正在使用 HTML5 并使用画布作为设计工具。但是，我想将我的画布保存在一个默认为 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/

在 Google Chrome 38、IE11 和 Firefox 34 中测试。
对于 Safari，您可能需要将图像格式从 PNG 更改为 JPEG。