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

【问题标题】：Capturing the content of a html div in a png/jpg image在 png/jpg 图像中捕获 html div 的内容
【发布时间】：2022-01-11 04:10:09
【问题描述】：

我正在尝试使用 html 和 javascript 制作一个非常简单的面部图像生成器，用户可以在其中选中一些复选框并向其中添加部分面部。复选框在一个表单中，我希望用户能够在点击提交按钮时下载他们创建的 png/jpg 图像。（或者让它自动下载，没关系）。我尝试搜索它，但除了我不允许使用的 html2canvas 之外，我真的找不到任何东西。

这是 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>

有什么建议吗？

【问题讨论】：

有供用户选择图像的输入类型文件。 -> developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
@Keith 感谢您的评论！不幸的是，这不是我想要的，我希望用户能够获得“图片”div，而不是上传文件
哦，对了，我想我知道你现在要做什么了。我建议你将图像制作为 svg，然后你可以返回 svg，或者甚至将 svg 转换为 png/jpg。
@Keith 我必须对图像的某些部分（眼睛、鼻子等）使用 png 图像。我可以将其转换为下垂吗？
是的，您可以使用图像标签 developer.mozilla.org/en-US/docs/Web/SVG/Element/image 将图像渲染为 svg，然后如果您希望用户能够下载 png 或 jpeg，则可以将 svg 渲染到画布。如果您希望用户下载 svg，您还需要使用 data-uri 使图像内联..

标签： javascript html forms image

【解决方案1】：

好的，您可能不需要 SVG 部分，如果您只是想将图像放在一起然后允许用户保存，那么您只需要 Image to Canvas，然后保存画布。

我创建了一个小提琴here，它基本上加载了 4 张图像，然后将它们并排放置在画布上，然后您就可以下载了。不幸的是不能使用 SO sn-ps，因为它太沙盒了，无法正常工作，但 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)

【讨论】：