0

How to convert div#WareHouse with SVG inside to image, then downloaded and center the div#WareHouse.I want to generate div#WareHouse as image code after clicking submit:

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

I tried in the html2canvas library but to no avail. Apparently, Maybe it does not support SVG. Here is a link!

enxaneta
  • 31,608
  • 5
  • 29
  • 42
Radosław Grzymała
  • 1

1 Answers1

1

I think the best approach would be making use of a canvas from the get-go.

You can then use JS as you have to draw images on the canvas (using your SVGs), like so:

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

Note that drawImage accepts the image as well as X and Y coordinates. See existing question for more: Drawing an SVG file on a HTML5 canvas

Once you have drawn your SVGs as you'd like to canvas, you can make use of .toDataURL() on your canvas. Something like this:

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

The above will return a base64 encoded string, which in turn could be output to the browser to prompt saving. The following outlines this really well: How To Save Canvas As An Image With canvas.toDataURL()?

There is also a library to help with the conversion and saving: canvas2image

NickZA
  • 321
  • 1
  • 6