web-dev-qa-db-ja.com

HTML5キャンバスをPDF

私はHTML5で作業しており、設計ツールとしてキャンバスを使用しています。しかし、キャンバスをデフォルトのimage/pngでjpegファイルに保存し、キャンバスのプレビューをPDFで表示したいと思います。

javascripthtmlhtml5-canvas
14
justin

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に変更する必要がある場合があります。

23
Razan Paul