Tengo un sitio web donde necesito generar imágenes dinámicas específicas para el usuario. El enfoque que encontré fue usar canvas . Tengo información de texto y un archivo de imagen que deben copiarse en el lienzo y luego, más tarde, pueden convertirse en el archivo de imagen que el usuario puede descargar.
function generateImage() { let event_date = '11-02-2022' let event_name = 'Prom Night' let canvas = document.getElementById("your-canvas") let ctx = canvas.getContext("2d") ctx.font = "26px Arial"; ctx.textAlign = 'center' // For Heading ctx.fillText(event_date + ' - ' + event_name, 400, 50) var img = new Image(); img.onload = function () { ctx.drawImage(img, 100, 100); } img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png' return canvas.toDataURL('image/jpg') } // generateImage() let image_gen = generateImage() $('#gen-image').attr('src', image_gen) <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <center> <h1>CANVAS ELEMENT</h1> </center> <br> <canvas id="your-canvas" width="1000" height="400"></canvas> <center> <h1>IMAGE ELEMENT</h1> </center> <br> <img src="" id="gen-image" alt="" style="border: 0.1em solid black;"> Como puede ver en el fragmento, la imagen es visible y se copia correctamente en el lienzo, pero no cuando el canvas se convierte en img con toDataURL()
Cargar una imagen puede llevar algún tiempo. En su código, toDataURL se devuelve antes de que la imagen se cargue y se pinte en el lienzo.
Para resolver esto, puede usar Promise para esperar hasta que se cargue la imagen y luego obtener la URL del lienzo.
function generateImage() { const promise = new Promise((resolve, reject) => { let event_date = "11-02-2022"; let event_name = "Prom Night"; let canvas = document.getElementById("your-canvas"); let ctx = canvas.getContext("2d"); ctx.font = "26px Arial"; ctx.textAlign = "center"; // For Heading ctx.fillText(event_date + " - " + event_name, 400, 50); var img = new Image(); img.setAttribute("crossorigin", "anonymous"); img.src = "https://picsum.photos/200/300"; img.onload = () => { ctx.drawImage(img, 100, 100); resolve(canvas.toDataURL("image/jpg")); }; }); return promise; } generateImage().then((value) => { $("#gen-image").attr("src", value); }); <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <center> <h1>CANVAS ELEMENT</h1> </center> <br> <canvas id="your-canvas" width="1000" height="400"></canvas> <center> <h1>IMAGE ELEMENT</h1> </center> <br> <img src="" id="gen-image" alt="" style="border: 0.1em solid black;">