Estoy tratando de agregar un par de imágenes a un pdf. Estoy usando el complemento jspdf para esto. Mi código es el siguiente:
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"); }) Pero cuando ejecuto el código, aparece el siguiente error en addImage() :
Error no detectado: archivo PNG incompleto o corrupto
¿Cómo puedo solucionar esto?
EDITAR: después de implementar la solución de @ AKX, el código funciona en la máquina local. Pero cuando se prueba en vivo, arroja este error:
Evento no capturado (en promesa) {isTrusted: true, type: 'error', target: null, currentTarget: null, eventPhase: 0, …}
No estás esperando a que se carguen todas las imágenes. Puede refactorizar cosas para usar una función prometida para cargar una imagen y convertirla en un URI de datos ( aunque de acuerdo con los documentos para jspdf, un HTMLImageElement también funcionaría, por lo que podría omitir el bit de lienzo ), y luego convertir su controlador en una función asíncrona para que sea más fácil await todas las cargas.
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'); })