HTML5 画布转 PDF答案

【问题标题】：HTML5 canvas to PDFHTML5 画布转 PDF
【发布时间】：2013-11-11 00:52:54
【问题描述】：

我正在使用 HTML5 并使用画布作为设计工具。但是，我想将我的画布保存在一个默认为 image/png 的 jpeg 文件中，并且我想在 PDF 中显示我的画布的预览。

【问题讨论】：

stackoverflow.com/questions/13201679/…的可能重复
我已经浏览了@paul 认为可以为我的查询提供解决方案的链接。但是我已经完成了该问题的整个解决方案，但没有找到可行的解决方案。因此，我在这里要求获得一个特定且可行的解决方案。

【解决方案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。

【讨论】：

@Blizzard，这是一个完美的例子。简单，由按钮驱动，易于理解。（为什么 github 上的示例不是 jspdf 的顶部？）在 jsfiddle 中轻松显示。非常感谢。
这个库似乎不再更新，这在我的浏览器上崩溃了，并且有多个关于崩溃的未解决问题。
谢谢阿舒。我已经修好了小提琴。问题是 jsPDF 资源已被移动。
伙计（@Blizzard），我正在使用 html2Canvas 来捕获我的屏幕，并且一直在寻找将画布下载到 pdf 中，我很欣赏你的方式（同样的想法：）