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

我試圖在JavaScript中將HTML5畫布轉換爲PDF，但我得到了黑色背景PDF。我試圖改變背景顏色，但仍然變黑。以下是代碼我想：HTML5畫布，使用jspdf.js將畫布轉換爲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');

如果您有任何想法，我會非常感激。

來源

2014-11-04 user3289230

首先，您需要設置所需的背景色canvas獲得data之前。然後，您需要在canvas上繪製jpeg圖像。

來源

2014-11-04 09:54:32

謝謝你的答覆。我設置了背景顏色，如Canvas.style.color =「white」，但仍然是黑色。 – user3289230 2014-11-07 06:27:32

一個好方法是使用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/

來源

2014-12-09 01:50:43

爲什麼使用html2canvas和jspdf的組合是一種好方法。他已經有一個畫布。我的情況也是如此。我使用的是相同的代碼，因爲我已經有一個畫布，我沒有使用html2canvas。 – 2015-02-26 09:35:52

這是一個很好的問題。這只是一種體驗。幾個月前，當我在研究這個時，我發現jspdf.js本身並沒有給出Flot圖的一致結果。使用html2canvas解決了我的問題。說實話，我沒有調查這些庫的內部代碼。哦，我記得，Flot圖是用Canvas添加其他HTML元素的。如果它僅僅是畫布，那麼Jspdf就足夠了。 – 2015-02-26 22:10:31

我有同樣的問題，例如第一次當我創建一個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

我承認，我did'nt進一步調查，只是很高興，這個工作。

來源

2015-08-11 20:35:37 deblocker

你可以在每次調用pdf.addImage（）後重新繪製畫布中的圖片嗎？如果你可以分享一些代碼，這將是非常有幫助的。 – 2017-03-22 06:54:09

@KeyBrdBasher：添加了我的示例代碼 – deblocker 2017-03-22 08:54:48

一個非常簡單的解決方案是，您將圖像保存爲jpeg。因爲png對我的應用程序工作正常，所以節省了。值得注意的是，Blizzard的響應還包括打印爲PNG，並且還爲畫布中的透明圖層生成非黑色填充。

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

代替

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

來源

2015-10-10 22:43:39

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

回答

相關問題