HTML5 画布转 PDF

问题描述

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

I am working in HTML5 and using canvas as a designing tool. 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.

推荐答案

一个好的方法是结合使用 jspdf.js 和 html2canvas.

A good approach is to use a 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/

在 Google Chrome 38、IE11 和 Firefox 34 中测试.
对于 Safari，您可能需要将图像格式从 PNG 更改为 JPEG.

Tested in Google Chrome 38, IE11 and Firefox 34.
For Safari you might need to change the image format from PNG to JPEG.

这篇关于HTML5 画布转 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！