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);