title: Convert html div having multiple images to single image using javascript
body: <p>I am trying to convert a DIV to single image. The div has 4 images in it. I have found the js for "htmltocanvas" but this jquery plugin does not create image with all images present in the div. </p>
  
  <p>Here is the div code which having the images in it and need to be convert into image.</p>
  
  <pre><code>&lt;div id="myJershy"&gt;
      &lt;!-- Color 3 --&gt;
      &lt;img src="grey.gif" id="grey" style="position: fixed; top: 8px; left: 12px; width: 935px;"&gt;
      &lt;!-- Color 2 --&gt;
      &lt;img class="orange" id="orange" src="orange.gif" style="position: fixed; left: 10px; top: 8px;"&gt;
      &lt;!-- Color 4 --&gt;
      &lt;img src="gold.gif" id="gold" style="position: fixed; top: 12px; left: 22px;"&gt;
      &lt;!-- Color 1 --&gt;
      &lt;img class="back" id="black" src="back.gif" style="position: fixed; left: 11px; top: 9px;"&gt; 
      &lt;!-- outline --&gt;
      &lt;img class="skel" id="skel" src="outline.gif" style="position: fixed;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have also tried with the below javascript code but not able to get the success.</p>
  
  <pre><code>var htmlcontent = $("#myJershy").html();
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var data = "&lt;svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'&gt;" +
               "&lt;foreignObject width='100%' height='100%'&gt;" +
                 "&lt;div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'&gt;" +
          htmlcontent+
                 "&lt;/div&gt;" +
               "&lt;/foreignObject&gt;" +
             "&lt;/svg&gt;";
  
  var DOMURL = self.URL || self.webkitURL || self;
  var img = new Image();
  var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
  var url = DOMURL.createObjectURL(svg);
  img.onload = function() {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
  };
  document.getElementById('previewproduct').src = url;
  </code></pre>
  
  <p>Please note "html div" has multiple images.</p>