title: Export JQuery Drag and Drop to image
body: <p>I created a simple drag and drop, but my real aim here is to save/export/download the final result as image/jpg/png
  How is this possible?</p>
  
  <p>Drawing.php</p>
  
  <pre><code> &lt;div id="picture1"&gt;
           &lt;img src="images/icon1.png"&gt;
       &lt;/div&gt;
       &lt;div id="picture2"&gt;
           &lt;img src="images/icon2.png"&gt;
       &lt;/div&gt;
       &lt;div id="dropme"&gt;
           &lt;img src="images/plan1.jpg"&gt;
       &lt;/div&gt;
       &lt;style&gt;
           #dropme{
               height: auto;
           }
           #dropme img{
               width:80%;
               max-width: 100%;
           }
           #picture1{  
               width: 159px;
               height: 80px;
          }   
          #picture2{   
               width: 80px;
               height: 79px;
          }    
           &lt;/style&gt;
            &lt;/div&gt;
             &lt;/div&gt;
  </code></pre>
  
  <p>java.js</p>
  
  <pre><code>$(document).ready(function() {
      $('#picture1, #picture2').draggable({
          containment:'document'});
      $('#dropme').droppable({
          drop:function(){
  
      }});
  });
  </code></pre>
  
  <p>So, all i want to know is how i can export the final result into an image</p>