HTML5画布转PDF

Question

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

- justin

---

可能是 https://dev59.com/dWrWa4cB1Zd3GeqP-WPj 的重复问题。 - Paul Draper

我已经查看了@paul提供的链接，他认为那里有我的问题的解决方案。但是我已经浏览了那个问题的整个解决方案，但没有得到可行的解决方案。因此，我在这里提问以获取一个特定且可行的解决方案。 - justin

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。

- Razan Paul

---

@Blizzard，那是一个完美的例子。简单易懂，由按钮驱动。 （为什么这不是 Github 上 jspdf 的示例之首？）在 jsfiddle 中轻松显示。非常感谢。 - zipzit

这个库似乎不再更新了，在我的浏览器上会导致崩溃，并且存在多个关于崩溃的未解决问题。 - Ilan lewin

谢谢Ashu。我已经修复了这个问题。问题是jsPDF资源已经被移动了。 - Razan Paul

兄弟（@Blizzard），我正在使用html2Canvas来捕捉我的屏幕，并一直在寻找将画布下载为pdf的方法，感谢你的想法（同样的思路：） - khaled Dehia