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。