Estoy tratando de hacer un generador de imágenes de caras muy simple con html y javascript, donde el usuario marcaría algunas casillas de verificación y le agregaría partes de la cara. Las casillas de verificación están en un formulario y quiero que el usuario pueda descargar una imagen png/jpg de su creación cuando presione el botón Enviar. (o hacer que se descargue automáticamente, no importa). Traté de buscarlo, pero realmente no pude encontrar nada además de html2canvas, que no puedo usar.
Aquí está el código html (versión mínima reproducible):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body id="pageBody"> <form action="" id="form"> <label for="body">Body</label><input type="checkbox" name="body" id="body"> <label for="eyes">Eyes</label><input type="checkbox" name="eyes" id="eyes"> <label for="nose">Nose</label><input type="checkbox" name="nose" id="nose"> <label for="mouth">Mouth</label><input type="checkbox" name="mouth" id="mouth"> <label for="hat">Hat</label><input type="checkbox" name="hat" id="hat"> <input type="submit" value="submit"> </form> <br> <div id="pic"> <img id="bodyImg" src="imgs/body.png"/> <img id="eyesImg" src="imgs/eyes.png"/> <img id="mouthImg" src="imgs/mouth.png"/> <img id="noseImg" src="imgs/nose.png"/> <img id="hatImg" src="imgs/hat.png"/> </div> </body> </html>¿Alguna sugerencia?
Ok, es posible que no necesite la parte SVG, si solo desea juntar imágenes y luego permitir que el usuario las guarde, entonces solo necesita Image to Canvas y luego guarde el lienzo.
He creado un violín aquí que básicamente carga 4 imágenes y luego las coloca una al lado de la otra en un lienzo, que luego le permite descargar. Desafortunadamente, no se pueden usar fragmentos de SO ya que está demasiado aislado para que funcione, pero fiddle funciona bien.
const svg = document.querySelector('svg'); const canvas = document.querySelector('canvas'); const button = document.querySelector('button'); const ctx = canvas.getContext("2d"); function loadImg(src) { return new Promise((resolve, reject) => { const i = new Image(); i.setAttribute('crossOrigin', 'anonymous'); i.src = src; i.onload = () => resolve(i); i.onerror = (e) => reject(e); }); } async function doIt() { const [i1, i2, i3, i4] = await Promise.all([ loadImg("https://picsum.photos/id/237/100/150"), loadImg("https://picsum.photos/id/238/100/150"), loadImg("https://picsum.photos/id/239/100/150"), loadImg("https://picsum.photos/id/240/100/150") ]); ctx.drawImage(i1, 0, 0); ctx.drawImage(i2, 100, 0); ctx.drawImage(i3, 0, 150); ctx.drawImage(i4, 100, 150); } function save() { const i = canvas.toDataURL("image/png") .replace("image/png", "image/octet-stream"); location.href = i; } doIt(); button.addEventListener('click', save)