エラー：jspdfを使用しているPNGファイルが不完全または破損しています

Question

"create-pdf"アイコンをクリックするとpdfに2つの画像を追加します。 最初の画像は画像に変換され、正しく動作するキャンバスです。私はHTMLのheadタグにこれらのスクリプトを追加した

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

：

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

私のコードのこのセクションでは、このエラーを得ました。

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

私を助けてください。私はたくさん検索しましたが、何も見つかりませんでした。

Answer 1

onrenderedは非同期関数ですか？ https://github.com/niklasvh/html2canvas/issues/470

ですから、srcpath

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

onrendered内に配置する必要があります