错误：使用 jspdf 时 PNG 文件不完整或损坏答案

【问题标题】：error:Incomplete or corrupt PNG file in using jspdf错误：使用 jspdf 时 PNG 文件不完整或损坏
【发布时间】：2020-09-21 21:36:31
【问题描述】：

当我点击“create-pdf”图标时，我想在我的pdf 中添加 2 张图片。第一个图像是一个可以转换为图像的画布，它可以正常工作。

var canvas = document.getElementsByClassName("jade-schematic-diagram");
img = canvas[0].toDataURL("image/png");
img.id="pic2";
doc = new jsPDF({
    unit:'px', 
    format:'a4'
});
doc.addImage(img, 'JPEG', 20, 20,400,150);

我的这部分代码出现了这个错误：

错误：PNG 文件不完整或损坏

var srcpath;
var element = $(".plot-waveforms"); // global variable
var imgageData = new Image();
imgageData.id = "pic";

html2canvas(element, {
    onrendered: function (canvas) {
        srcpath = canvas.toDataURL("image/png");
    }
});
imgageData.src=srcpath;
doc.addImage(imgageData , 'PNG',  20, 20,400,150);

我在我的 html 头标签中添加了这些脚本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script type="text/javascript" src="zlib.js"></script>
<script type="text/javascript" src="png.js"></script>
<script type="text/javascript" src="addimage.js"></script>
<script type="text/javascript" src="png_support.js"></script>

请帮助我。我搜索了很多，但我没有找到任何东西。

【问题讨论】：

标签： javascript html jspdf

【解决方案1】：

onrendered 是一个异步函数，不是吗？ https://github.com/niklasvh/html2canvas/issues/470

所以你必须把srcpath放在onrendered里面

html2canvas(element, {
    onrendered: function (canvas) {
        srcpath = canvas.toDataURL("image/png");
        imgageData.src=srcpath;
        doc.addImage(imgageData , 'PNG',  20, 20,400,150);
    }
});

【讨论】：

【解决方案2】：

当您将图像发送到 jsPDF 时，图像尚未完成加载。因此，为了确保图像在将其添加到文档之前已完成加载，请将其添加到您的代码中：

var myImage = new Image();
myImage .src = 'https://www.myserver.com/somepath/myImage.png';
myImage .onload = function(){
doc.addImage(myImage , 'png', 5, 5, 40, 10);
doc.save('myPDF.pdf');
};

【讨论】：