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

回答

相关问题