Save the contents of a div to an image
<p>Basically I am pasting images in a div area. these images are draggable and resizable. once the images are edited i need to save the final content into one final image.</p>

<p>I have done the part where images need to be pasted, resized and dragged. Only part remaining is to save this content in one single image.</p>

<p>Canvas seems to be the possible solution. However the div needs to be converted to a canvas. How can that be done ?? </p>

<p>HERE IS THE CODE :</p>

<p>Here is the code
    
    
    </p>

<pre><code>$(function () {
    $("#editor-box").bind("paste", function (ev) {
    var $this = $(this);
    var original = ev.originalEvent;
    var file = original.clipboardData.items[0].getAsFile();
    var reader = new FileReader();
    reader.onload = function (evt) {
    var result = evt.target.result;

    var arr = result.split(",");
    var data = arr[1]; // raw base64
    var contentType = arr[0].split(";")[0].split(":")[1];

    // this needs to post to a server route that can accept raw base64 content and save to a file
    $.post("/echo/html/", {
    contentType: contentType,
    data: data
    });
    $this.append("");
};  
    reader.readAsDataURL(file);
});

}); 

   $(document).ready(function() {
   $("#editbutton").click(function(){
     var val = 0;
     $("img").each(function () {            
         $(this).attr('id', 'img' + val);   
         $('#img' + val).resizable().parent().draggable();                          
         val = val+1; 
     });
 }); 


 $("#savebutton").click(function(){
     /*need to convert the HTML to Canvas and then save the image. OR directly have the div contents saved as  image*/
 }); 


 });

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="editor-box" contenteditable="true"&gt;
&lt;/div&gt;
&lt;div&gt;&lt;input type="button" id="editbutton" value="drag"  /&gt;&lt;/div&gt;
&lt;div&gt;&lt;input type="button" id="savebutton" value="save"  /&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>
