HTML5画布到PDF [英] HTML5 canvas to PDF
本文介绍了HTML5画布到PDF的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用HTML5并使用canvas作为设计工具。但是我想将我的canvas保存为jpeg文件,因为默认为image / png,我想在PDF中显示我的canvas的预览。
I am working in HTML5 and using canvas as designing tool.However I want to save my canvas in a jpeg file as default is image/png and I want to show the preview of my canvas in a a PDF.
我希望能很快得到帮助。
I hope to get the help soon.
推荐答案
好的方法是使用jspdf.js和html2canvas的组合。
A good approach is to use combination of jspdf.js and 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/
jsfiddle: http://jsfiddle.net/p4s5k59s/1222/
使用Chrome 38,IE11和Firefox 34进行测试。对于Safari,您可能需要将图像格式更改为JPEG fron PNG。
Tested in Chrome 38, IE11 and Firefox 34. For Safari, you might need to change the image format to JPEG fron PNG.
这篇关于HTML5画布到PDF的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文