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

如果你有任何想法，我会非常感激。

- user3289230

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/

- Razan Paul

---

为什么使用html2canvas和jspdf的组合是一个好方法？他已经有了一个画布。我的情况也是如此。我正在使用您在onrendered中拥有的相同代码，但由于我已经有了一个画布，所以我不使用html2canvas。 - Ozair Kafray

这是一个很好的问题。那只是一次经验。几个月前，当我在处理这个问题时，我发现 jspdf.js 本身对于 Flot 图表并不给出一致的结果。使用 html2canvas 解决了我的问题。老实说，我没有调查这些库的内部代码。哦，我记得，Flot 图表会添加其他 HTML 元素到 Canvas 中。如果它仅仅是 Canvas，那么 Jspdf 可能已经足够了。 - Razan Paul

Answer 2

一个非常简单的解决方案是将图像保存为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');

- Scott Close

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

我承认，我没有进一步调查，只是很高兴这个能够工作。

- deblocker

---

你能详细说明一下“在每次调用pdf.addImage()后，我都会在画布中重新绘制图片”吗？如果您能共享一些代码，那将非常有帮助。 - Sayan

Answer 4

首先，在获取数据之前，您需要在画布上设置所需的背景颜色。然后，您需要在画布上绘制JPEG图像。

- John Stephen

---

谢谢您的回复。我设置了背景颜色，例如Canvas.style.color = "white"，但仍然是黑色。 - user3289230

Answer 5

只需将格式从JPEG更改为PNG

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

- Raj Prabhu

---

欢迎来到Stackoverflow。您介意再详细解释一下您的答案，以便其他程序员能够理解它如何帮助解决问题吗？ - Nagama Inamdar