Javascript HTML5画布，使用jspdf.js将画布转换为PDF

我试图用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');

---

如果你有什么想法，我将非常感激

首先，在获取

数据之前，需要在
画布上设置所需的背景色。然后，您需要在
画布上绘制
jpeg
图像
一个好方法是结合使用jspdf.js和html2canvas。我已经为你做了一份礼物

 <canvas id="canvas" width="480" height="320"></canvas> 
      <button id="download">Download Pdf</button>

jsFIDLE:
我也遇到了同样的问题，例如，第一次创建pdf时，画布图像还可以，但接下来的所有图像都显示为黑色。没有照片

我找到的解决方法如下：每次调用pdf.addImage（）后，我都会在画布中重新绘制图片。现在对我来说很好

编辑：根据要求，这里有更多详细信息：

假设我有这样一个画布绘制功能（只是一个示例，没关系）：

函数绘图画布（cv）{
对于（var i=0；i一个非常简单的解决方案是将图像保存为jpeg。将其保存为png对我的应用程序非常有效。值得注意的是，'的响应还包括打印为png，并为画布中的透明层生成非黑色填充

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

而不是

只需将格式JPEG更改为PNG

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

谢谢您的回复。我将背景颜色设置为Canvas.style.color=“白色”但仍然是黑色的。为什么将html2canvas与jspdf结合使用是一个好方法。他已经有了画布。我的情况也是如此。我使用的代码与onrendered中的代码相同，但因为我已经有了画布，所以我没有使用html2canvas。这是一个好问题。这只是一个经验。几个月前，当我在做这项工作时，我发现jspdf.js本身并没有为Flot图提供一致的结果。使用html2canvas解决了我的问题。老实说，我没有调查这些库的内部代码。哦，我记得，Flot图是用画布添加其他HTML元素的。如果只是画布，那么jspdf可能就足够了。你能在每次调用后解释一下
对于pdf.addImage（），我在画布中重新绘制了图片
？如果您可以共享一些代码，这将非常有帮助。欢迎使用Stackoverflow。您是否介意为其他程序员扩展一下您的答案；以便了解它对解决问题的确切帮助。
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

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

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

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