Question

我正在开发一个使用canvas生成一些图形的应用程序。现在我需要将这些图形导出为PDF。我的代码出了什么问题？

我认为问题是src使用dataURI：

function uri(obj) {
  var canvas = document.getElementById(obj);
  var dataURL = canvas.toDataURL("image/jpeg,1.0");
  var img = document.getElementById('minha_imagem');
  img.src = dataURL;
}

CodePen

Answer 1

这也是我的问题。

var canvas = document.getElementById(canvas_obj);
doc.addImage(canvas.toDataURL("image/jpeg"), 'JPEG', 0, 0, 100, 100);

产生带有黑色图像的pdf。

http://codepen.io/doriclaudino/pen/KprqzR

我认为您需要使用最新版本的JSPDF和其他包含。

Answer 2

有点晚了，

我一个月前就遇到过同样的问题，我这样解决了这个问题

function getPDFFileButton () {
            return html2canvas($("#toSaveAsPDF"), {
                background: "#ffffff",
                onrendered: function(canvas) {
                    var myImage = canvas.toDataURL("image/jpeg");
                    var imgWidth = (canvas.width * 25.4) / 240;
                    var imgHeight = (canvas.height * 25.4) / 240; 
                    var table = new jsPDF('p', 'mm', 'a4');
                    table.addImage(myImage, 'JPEG', 15, 2, imgWidth, imgHeight); // 2: 19
                    table.save('Statistiques.pdf');
                }
            });
        }

您可以使用此行background: "#ffffff",

设置生成的PDF的背景

希望这会有所帮助，

Answer 3

为避免从画布导出时图像出现黑色背景，请改为选择 png 压缩。效果很好！

如何使用jsPDF导出画布图像？

3 个答案: