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的组合.我为你做了个傻瓜.

 <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

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