错误:使用jspdf时PNG文件不完整或损坏 [英] error:Incomplete or corrupt PNG file in using jspdf

问题描述

当我单击创建pdf"图标时，我想在pdf中添加2张图像. 第一张图片是可以转换为图片的画布，它可以正常工作.

I want to add 2 images in my pdf when i click "create-pdf" icon. First image is a canvas that convert to image and it correctly work.

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); 

我的代码的这一部分出现此错误:

This section of my code got this error:

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

Error: Incomplete or corrupt PNG file

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头标记中添加了这些脚本.

I was added these script in my html head tag.

<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>

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

Please help me. I searched a lot but i don't find anything.

推荐答案

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

onrendered is an async function, isn't it? 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);
    }
});

这篇关于错误:使用jspdf时PNG文件不完整或损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！