Estoy creando mediante programación un HTML Canvas muy simple en el que estoy escribiendo un texto y luego dibujando una imagen PNG importada. Ahora quiero "aplanar" este lienzo y exportarlo como una nueva imagen.
Está funcionando, pero no al 100%.
El problema es que, si bien el texto y los colores de fondo SÍ aparecen en el PNG recién creado y exportado, la imagen que se importó y dibujó en el lienzo original NO aparece.
Aquí está mi código:
var newCanvas = document.createElement("canvas"); var context = newCanvas.getContext("2d"); // 1. Filling Canvas with Background Color: context.fillStyle = "blue"; context.fillRect(0, 0, newCanvas.width, newCanvas.height); // 2. Writing Text on the Canvas: context.font = "30px Comic Sans MS"; context.fillStyle = "yellow"; context.textAlign = "center"; context.fillText("Hello World", newCanvas.width/2, newCanvas.height/2); // 3. Adding a PNG to the Canvas: let bgdImage = new Image(); bgdImage.src = "images/TilePattern1.png"; bgdImage.onload = function(){ context.drawImage(bgdImage, 0, 0, bgdImage.width, bgdImage.height); } // 4. Now I create a NEW Image object and set its contents to be // all those elements I drew on my Canvas: let finalImage = new Image(); finalImage.src = newCanvas.toDataURL(); Entonces, la finalImage resultante creada por este código TIENE tanto el color de fondo como el texto que escribí, pero NO tiene la IMAGEN "TilePattern1.png" que importé y dibujé en el lienzo usando .drawImage
¿Qué debo hacer para arreglar esto?
(NOTA: la imagen " TilePattern1.png " importada SÍ aparece en el lienzo dibujado en la página web , pero NO aparece en la imagen exportada desde el lienzo).
Supongo que tienes una situación de error:
SecurityError El mapa de bits del lienzo no está limpio desde el origen; al menos algunos de sus contenidos han sido o pueden haber sido cargados desde un sitio diferente al que se cargó el documento en sí.
ACTUALIZACIÓN: ahora ejecuté su código por completo y el primer problema es que no está esperando que se cargue la imagen antes de crear el base64 desde el lienzo, por lo que no tiene la imagen. El segundo problema es que si espera a que se cargue la imagen y luego intenta crear la base64, verá algo como este error:
DOMException no detectada: no se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos dañados no se pueden exportar.
Aquí está el código que espera a que se cargue la imagen para que puedas probarlo por ti mismo:
<body> <img /> <script> var newCanvas = document.createElement("canvas"); var context = newCanvas.getContext("2d"); // 1. Filling Canvas with Background Color: context.fillStyle = "blue"; context.fillRect(0, 0, newCanvas.width, newCanvas.height); // 2. Writing Text on the Canvas: context.font = "30px Comic Sans MS"; context.fillStyle = "yellow"; context.textAlign = "center"; context.fillText("Hello World", newCanvas.width/2, newCanvas.height/2); // 3. Adding a PNG to the Canvas: let bgdImage = new Image(); bgdImage.src = "images/TilePattern1.png"; bgdImage.onload = function(){ context.drawImage(bgdImage, 0, 0, bgdImage.width, bgdImage.height); // 4. Now I create a NEW Image object and set its contents to be // all those elements I drew on my Canvas: let finalImage = new Image(); finalImage.src = newCanvas.toDataURL(); // below added so we can see the canvas and the final image (if you comment out the above line) document.body.appendChild(finalImage); document.body.appendChild(newCanvas); } </script> </body>