[英]HTML5 canvas to PDF
I am working in HTML5 and using canvas as a designing tool. 我正在使用HTML5并使用canvas作为设计工具。 However, I want to save my canvas in a jpeg file with a default of image/png and I want to show the preview of my canvas in a PDF.
但是,我想将我的画布保存在一个默认为image / png的jpeg文件中,我希望以PDF格式显示画布的预览。
A good approach is to use a combination of jspdf.js and html2canvas. 一个好方法是使用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/ jsfiddle: http : //jsfiddle.net/p4s5k59s/1222/
Tested in Google Chrome 38, IE11 and Firefox 34. 在谷歌Chrome 38,IE11和Firefox 34中测试过。
For Safari you might need to change the image format from PNG to JPEG. 对于Safari,您可能需要将图像格式从PNG更改为JPEG。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.