我正在尝试在 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');
如果您有任何想法，我将不胜感激。
【问题讨论】：
标签： javascript html pdf canvas jspdf
首先，您需要在获取data 之前设置canvas 上所需的背景颜色。然后，您需要在canvas 上绘制jpeg 图像。
【讨论】：
一个好的方法是结合使用 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');
}
});
【讨论】：
我遇到了同样的问题，例如我第一次创建 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
我承认，我没有进一步调查，只是很高兴这行得通。
【讨论】：
after each call to pdf.addImage() i redraw the picture in the canvas吗？如果您能分享一些代码，那将非常有帮助。
一个非常简单的解决方案是将图像保存为 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');
【讨论】：
只需将 JPEG 格式更改为 PNG
pdf.addImage(imgData, 'PNG', 0, 0, 1350, 750);
【讨论】：