Necesito tu ayuda :)
Así que seguí un tutorial sobre cómo hacer un duotono con lienzo. Toma una imagen, la convierte a escala de grises y luego a duotono. Ahora intento descargar el lienzo como PNG, pero descarga una imagen vacía.
"Parece que su publicación es principalmente código; agregue algunos detalles más". No estoy muy seguro de cómo puedo agregar más detalles :(
¿Alguna idea de cómo arreglarlo?
Soy un poco novato. Gracias de antemano
<html> <head> </head> <body> <div id="main"> <canvas id="duotone" width="600" height="600"></canvas> </div> <script> function Duotone(id, src, primaryClr, secondaryClr, actions = (ctx) => null) { let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); let downloadedImg = new Image(); downloadedImg.crossOrigin = ""; downloadedImg.onload = function() { ctx.drawImage(downloadedImg, 0, 0, canvas.width, canvas.height); imageData = ctx.getImageData(0, 0, 800, 800); const pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { const red = pixels[i]; const green = pixels[i + 1]; const blue = pixels[i + 2]; const avg = Math.round((0.299 * red + 0.587 * green + 0.114 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg; } ctx.putImageData(imageData, 0, 0); ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = primaryClr; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = secondaryClr; ctx.fillRect(0, 0, canvas.width, canvas.height); }; downloadedImg.src = src; } function randomIndex() { return Math.floor(Math.random() * 3); } function randomizeColors() { // Arrays of colors, with a random index chosen when clicked. let primary = ["#f65e35", "#00ff36", "#77acd4"]; let secondary = ["#1e3265", "#23278a", "#033dc5"]; let ind = randomIndex(); Duotone( "duotone", "https://i.imgur.com/WQ1Iydl.jpeg", primary[ind], secondary[ind], ); } function downloadImage() { document.querySelector("#image").src = document .querySelector("#duotone") .toDataURL("image/png"); } var canvas = document.getElementById("duotone"); var image = canvas.toDataURL(); var aDownloadLink = document.createElement('a'); aDownloadLink.download = 'canvas_image.png'; aDownloadLink.href = image; aDownloadLink.click(); randomizeColors(); </script> </body> </html>Lo que estás tratando de descargar aún no está listo, debes esperar a que se cargue por completo.
window.onload = function () { var canvas = document.getElementById("duotone"); var image = canvas.toDataURL(); var aDownloadLink = document.createElement("a"); aDownloadLink.download = "canvas_image.png"; aDownloadLink.href = image; aDownloadLink.click(); };