HTML5 畫布，使用 jspdf.js 將畫布轉換為 PDF

Question

我試圖在 JavaScript 中將 HTML5 畫布轉換為 PDF，但我得到了黑色背景 PDF。 我試圖改變背景顏色，但仍然變黑。 以下是我正在嘗試的代碼：

Canvas = document.getElementById("chart");
Context = Canvas.getContext("2d");

var imgData = Canvas.toDataURL('image/jpeg');
var pdf = new jsPDF('landscape');
pdf.addImage(imgData, 'JPEG', 0, 0, 1350, 750);
pdf.save('download.pdf');

如果您有任何想法，我將不勝感激。

Answer 1

一個好的方法是結合使用 jspdf.js 和 html2canvas。 我為你制作了一個 jsfiddle。

 <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/rpaul/p4s5k59s/5/

Answer 2

一種非常簡單的解決方案是將圖像另存為 jpeg。 保存為 png 對我的應用程序來說很好用。 值得注意的是， 暴雪的響應還包括打印為 png，並且還為畫布中的透明層生成非黑色填充。

  var canvas = event.context.canvas;
  var data = canvas.toDataURL('image/png');

代替

  var canvas = event.context.canvas;
  var data = canvas.toDataURL('image/jpg');

Answer 3

我遇到了同樣的問題，例如，當我第一次創建 pdf 時，畫布圖像還可以，但接下來的所有圖像都是黑色的。 禁止攝影！

我發現的解決方法如下：每次調用 pdf.addImage() 后，我都會在畫布中重繪圖片。 它現在對我來說很好用。

編輯：根據要求，這里有更多細節：

假設我有一個這樣的畫布繪圖功能（只是一個例子，沒關系）：

function drawCanvas(cv) {
  for(var i=0; i<cv.height; i++) {
    for(var j=0, d=0; j<cv.width; j++) {
      cv.data[d] = 0xff0000;
      d += 4;
    }
  }
}

我必須按如下方式修復我的打印功能：

var cv=document.getElementById('canvas');
printPDF(cv) {
    var imgData=cv.toDataURL("image/jpeg", 1.0);
    var doc=new jsPDF("p","mm","a4");
    doc.addImage(imgData,'JPEG',15,40,180,180);
    drawCanvas(cv); // <--- this line is needed, draw again
}
drawCanvas(cv); // <--- draw my image to the canvas, ok
printPDF(cv); // first time is fine
printPDF(cv); // second time without repaint would be black

我承認，我沒有進一步調查，只是很高興這有效。

Answer 4

首先，您需要在獲取data之前在canvas上設置所需的背景顏色。 然后，您需要在canvas上繪制jpeg圖像。

Answer 5

只需將格式 JPEG 更改為 PNG

pdf.addImage(imgData, 'PNG', 0, 0, 1350, 750);