Javascript 使用带有bg图像的svg+divs创建图像

我想将一些带有bg图像的HTML svg+div转换为实际图像，并使用JS+PHP将其保存到一个目录中

这是HTML的一个示例：

HTML

这就是它的样子：

这是将其转换为图像后的外观：

---

最简单的方法是什么？提前谢谢

最准确的方法是在元素中建立图像。您可以使用ctx.drawImage将dom元素添加到画布中，并将它们放置在svg和背景图像中

这样，您就可以使用canvas.toDataURLimage/png并在制作完成后将其保存为图像。这就是JS部分。一旦你有了这个文件，用PHP将它保存到数据库中

---

还有一些库，你可以尝试一下，它们将dom对象转换成png，但是它们并不总是最精确的，因为它们必须适应各种css选择器等。

Hi，我尝试过使用html2canvas，但SVG不起作用：/嗯，问题是SVG没有渲染，所以它们屏蔽了所有其他内容，所以我在画布制作完成后手动绘制SVG，谢谢！

<img src="http://svgur.com/i/5x3.svg" alt="">
<div>
  <img src="http://svgur.com/i/5wM.svg" alt="">
  <div class="d1" style="background-image: url(https://picsum.photos/400/250/?image=114)"></div>
  <div class="d2" style="background-image: url(https://picsum.photos/400/250/?image=115)"></div>
  <div class="d3" style="background-image: url(https://picsum.photos/400/250/?image=116)"></div>
</div>

html,body{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body > img{
  height: 24rem;
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  top: 0;
  z-index: 20;
}

body > div > img{
  height: 24rem;
  position: relative;
  display: block;
  left: 0;
  right: 0;
  opacity: 0;
  bottom: 0;
  margin: auto;
  top: 0;
}

body > div{
  position: relative;
  z-index: 15;
}

body > div > div{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: calc(100% / 3);
  position: absolute;
  left: 0;
}

body > div > .d1{
  top: 0;
}

body > div > .d2{
  top: calc(100% / 3);
}

body > div > .d3{
  top: calc((100% / 3) * 2);
}