使用bg-image从svg + div创建一个图像

Question

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

这是HTML的一个例子：

https://jsfiddle.net/9k7u32s4/7/

HTML

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

CSS

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);
}

它的外观如下：

这就是将其转换为图像后的样子：

实现这一目标的最简单方法是什么？提前谢谢！

Answer 1

最准确的方法是在<canvas>元素中构建图像。您可以使用ctx.drawImage将dom元素添加到画布并定位它们（​​svg＆＃39; s和背景图像）。

这样你可以使用canvas.toDataURL("image/png")并将其保存为图像。那是JS的一部分。然后，一旦你有了这个文件，用PHP保存到数据库。

你可以尝试使用像https://html2canvas.hertzen.com/那样的库，他们拿一个dom对象并将它们变成png，但它们并不总是最准确的，因为它们必须适应所有各种css选择器等。