我正在嘗試將幾張圖片添加到 pdf 中。我正在jspdf為此使用插件。我的代碼如下：
document.getElementById("help").addEventListener("click",function(){
var base1="";
var base2="";
var base3="";
var doc = new jsPDF();
var img=new Image();
var img1=new Image();
var img2=new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
base1 = canvas.toDataURL();
}
img.src='/Screenshot (1).png';
img1.onload = function() {
var canvas = document.createElement("canvas");
ctx = canvas.getContext('2d');
ctx.drawImage(img1, 0, 0);
base2 = canvas.toDataURL();
}
img1.src='/Screenshot (2).png';
img2.onload = function() {
var canvas = document.createElement("canvas");
ctx = canvas.getContext('2d');
ctx.drawImage(img2, 0, 0);
base3 = canvas.toDataURL();
}
img2.src='/Screenshot (3).png';
doc.addImage(base1,'PNG',20,36,100,120);
doc.addImage(base2,'PNG',20,158,100,120);
doc.addImage(base3,'PNG',20,281,100,120);
doc.save("example.pdf");
})
但是當我執行代碼時，出現以下錯誤addImage()：
未捕獲的錯誤：PNG 檔案不完整或損壞
我該如何解決？
編輯：實施@AKX 的解決方案后，代碼在本地機器上運行。但是當現場測驗時，它會拋出這個錯誤：
未捕獲（承諾中）事件 {isTrusted: true, type: 'error', target: null, currentTarget: null, eventPhase: 0, ...}
uj5u.com熱心網友回復：
您無需等待所有影像加載完畢。您可以重構事物以使用promisified 函式來加載影像并將其轉換為資料 URI（盡管根據 jspdf 的檔案，HTMLImageElement 也可以，因此您可以跳過畫布位），然后將您的處理程式變成一個異步函式，可以輕松地await處理所有負載。
function loadImageAsDataURL(url) {
return new Promise((resolve, reject) => {
var img = new Image();
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
resolve(canvas.toDataURL());
}
img.onerror = reject;
img.src = url;
});
}
document.getElementById('help').addEventListener('click', async function () {
// Load all images first...
var base1 = await loadImageAsDataURL("/Screenshot (1).png");
var base2 = await loadImageAsDataURL("/Screenshot (2).png");
var base3 = await loadImageAsDataURL("/Screenshot (3).png");
// ... and then generate the PDF.
var doc = new jsPDF();
doc.addImage(base1, 'PNG', 20, 36, 100, 120);
doc.addImage(base2, 'PNG', 20, 158, 100, 120);
doc.addImage(base3, 'PNG', 20, 281, 100, 120);
doc.save('example.pdf');
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/417637.html
標籤：
上一篇：檢測價值的按鈕