Javascript HTML5 画布，使用 jspdf.js 将画布转换为 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26731947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 canvas, convert canvas to PDF with jspdf.js
提问by user3289230
I am trying to convert HTML5 canvas to PDF in JavaScript but I get a black background PDF. I tried to change the background color but still get black. The following is code I am trying:
我试图在 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');
If you have any idea, I'd appreciate it very much.
如果您有任何想法，我将不胜感激。
回答by Razan Paul
A good approach is to use combination of jspdf.js and html2canvas. I have made a jsfiddle for you.
一个好的方法是结合使用 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/
jsfiddle：http: //jsfiddle.net/rpaul/p4s5k59s/5/
回答by Scott Close
One very simple solution is that you are saving the image as jpeg. Saving instead as png works fine for my application. Of note, Blizzard's response also includes the print as png, and also produces non-black fill for transparent layers in the canvas.
一种非常简单的解决方案是将图像另存为 jpeg。保存为 png 对我的应用程序来说很好用。值得注意的是，暴雪的响应还包括打印为 png，并且还为画布中的透明层生成非黑色填充。
var canvas = event.context.canvas;
var data = canvas.toDataURL('image/png');
instead of
代替
var canvas = event.context.canvas;
var data = canvas.toDataURL('image/jpg');
回答by deblocker
I had the same problem, e.g. the first time when i create a pdf the canvas image is ok, but all the other next, came out black. No picture!
我遇到了同样的问题，例如，当我第一次创建 pdf 时，画布图像还可以，但接下来的所有图像都是黑色的。禁止摄影！
The workaround i found is as follows: after each call to pdf.addImage() i redraw the picture in the canvas. It works now fine for me.
我发现的解决方法如下：每次调用 pdf.addImage() 后，我都会在画布中重绘图片。它现在对我来说很好用。
EDIT:As requested, here some more details:
编辑：根据要求，这里有更多细节：
Let say i have a canvas drawing function like this (just an example, it doesn't matter):
假设我有一个这样的画布绘图功能（只是一个例子，没关系）：
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;
}
}
}
I had to fix my printing function as follows:
我必须按如下方式修复我的打印功能：
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
I admit, i did'nt investigate further, just happy that this works.
我承认，我没有进一步调查，只是很高兴这有效。
回答by John Stephen
At first, you need to setthe desired background color on the canvasbefore getting the data. Then, you need to draw jpegimage on the canvas.
首先，你需要设置上的背景颜色canvas获得前data。然后，您需要jpeg在canvas.
回答by Raj Prabhu
Just change JPEG to PNG pdf.addImage(imgData, 'PNG', 0, 0, 1350, 750);
只需将 JPEG 更改为 PNG pdf.addImage(imgData, 'PNG', 0, 0, 1350, 750);
