Capturing the content of a html div in a png/jpg image-CodePudding

I'm trying to make a very simple face image generator with html and javascript, where the user would check some checkboxes and add parts of the face to it. The checkboxes are in a form, and I want the user to be able to download a png/jpg image of their creation when they hit the submit button. (or have it automatically get downloaded, doesn't matter). I tried searching for it but I really couldn't find anything besides html2canvas, which I am not allowed to use.

Here's the html code (minimal reproducible version):

<!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>

Any suggestions?

CodePudding user response：

Ok, you might not need the SVG part, if your just wanting to put together images and then allow the user to save, then you just need Image to Canvas, and then save the canvas.

I've create a fiddle here that basically loads 4 images, and then places them side by side on a canvas, that then allows you to download. Unfortunately can't use SO snippets as it too sandboxed for it to work, but fiddle works fine.

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)