Canvas2Image Downloads Image to Folder in Server

Question

So I am using very simple Html2Canvas and Canvas2Image code. The finished product will be a generating poster using PHP randomly loading elements, so therefore the div needs to be converted to an image to be saved/printed. (I've striped the code down here to the very very basics).

Javascript:

$(window).load(function(){
  $(function() { 
   $("#btnSave").click(function() { 
    html2canvas($(".widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
          }
      });
   });
}); 
 });

HTML

<div class="widget">
 text
</div><br/>

<input type="button" id="btnSave" value="Save Image"/>
<div id="img-out"></div>

CSS

.widget {
      display: inline-block;
      background-color: white;
      width: 100px;
      height: 100px;
      border: 5px solid black;
  }

All very simple. But I want the image output on button click, as well as being displayed on the page, to be downloaded to the user's computer and to a folder in my server using PHP or AJAX with a random file name. I'm sure the downloading to the user's computer is quite simple, and the saving to my server is more complicated.

JSFIDDLE OF CURRENT CODE

This is the randomly loading generator that I have to use this with, just for reference: click here.

Answer 1

You can update the links to Canvas2Image and use an ajax request to send the image to server. Here is the link to the fiddle.

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                var image = Canvas2Image.convertToPNG(canvas);
               var image_data = $(image).attr('src');
              //make an ajax call here sending image_data to the server
              /*
              $.ajax({
              url: 'localhost:3000/save_image',
              data:{ image: image_data},
              success: function(){

              }
              });
              */
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});