在 png/jpg 图像中捕获 html div 的内容

Question

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.我正在尝试使用 html 和 javascript 制作一个非常简单的人脸图像生成器，用户可以在其中选中一些复选框并向其中添加部分人脸。 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.复选框在一个表单中，我希望用户能够在点击提交按钮时下载他们创建的 png/jpg 图像。 (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.我尝试搜索它，但除了我不允许使用的 html2canvas 之外，我真的找不到任何东西。

Here's the html code (minimal reproducible version):这是 html 代码（最小可复制版本）：

<!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?有什么建议么？

Answer 1

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.好的，您可能不需要 SVG 部分，如果您只是想将图像放在一起然后允许用户保存，那么您只需要将图像到 Canvas，然后保存 ZFCC790C72A86190DE51B549D0DDDC6。

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.我在这里创建了一个小提琴，它基本上加载了 4 张图像，然后将它们并排放置在 canvas 上，然后您就可以下载了。 Unfortunately can't use SO snippets as it too sandboxed for it to work, but fiddle works fine.不幸的是，不能使用 SO 片段，因为它太沙盒了，无法正常工作，但 fiddle 可以正常工作。

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)

在 png/jpg 图像中捕获 html div 的内容

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-12-05 19:22:26

在 png/jpg 图像中捕获 html div 的内容

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-12-05 19:22:26

解决方案1
0 已采纳 2021-12-05 19:22:26