Question

如何将内部带有SVG的div＃WareHouse转换为图像，然后下载div＃WareHouse并将其居中。我想在单击提交后生成div＃WareHouse作为图像代码：

<div id="WareHouse">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 48px; left: 8px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 76px; left: 56px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 104px; left: 104px;">
  <img width="80"
    src="http://rgrzymala.pl/2.svg" style="top: 132px; left: 152px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 160px; left: 200px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 188px; left: 248px;">
  <img width="80" src="http://rgrzymala.pl/2.svg"
    style="top: 216px; left: 296px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 244px; left: 344px;"><img width="80" src="http://rgrzymala.pl/2.svg" style="top: 272px; left: 392px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 300px; left: 440px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 328px; left: 488px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 356px; left: 536px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 384px; left: 584px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 412px; left: 632px;">
  <img width="80"
      src="http://rgrzymala.pl/2.svg" style="top: 440px; left: 680px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 468px; left: 728px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 496px; left: 776px;">
  <img width="80" src="http://rgrzymala.pl/2.svg"
      style="top: 524px; left: 824px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 552px; left: 872px;">
  <img width="80" src="http://rgrzymala.pl/2.svg" style="top: 580px; left: 920px;">  
</div>

我尝试了html2canvas库，但无济于事。显然，它可能不支持SVG。这是a link！

Answer 1

我认为最好的方法是从一开始就使用画布。

然后可以使用JS，因为必须在画布上绘制图像（使用SVG），如下所示：

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

请注意，drawImage接受图像以及X和Y坐标。有关更多信息，请参见现有问题：Drawing an SVG file on a HTML5 canvas

一旦您想绘制画布绘制了SVG，就可以在画布上使用.toDataURL()。像这样：

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();

上面的代码将返回base64编码的字符串，然后可以将其输出到浏览器以提示保存。以下内容对此进行了很好的概述：How To Save Canvas As An Image With canvas.toDataURL()?

还有一个库可帮助您进行转换和保存：canvas2image

如何将内部带有SVG的div＃WareHouse转换为图像

1 个答案: