HTML5 canvas to PDF

Question

我在HTML5中工作，並使用畫布作爲設計工具。但是我想將我的畫布保存爲jpeg文件，因爲默認爲image/png，我想在PDF中顯示我的畫布預覽。

我希望能很快得到幫助。

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/

在Chrome 38測試，IE11和Firefox 34爲Safari瀏覽器，您可能需要更改圖像格式爲JPEG弗朗PNG。