how to save an image which is converted from a canvas in to my local folder?

Question

For my javascript application i need to take the screen shot of every page in my ipad presentations, anyway i found a solution for that using html2canvas. Now i'm able to convert the html page to image but how can i save that in my presentations image folder using javascript?

Here is my javascript

html2canvas(document.body, 
{
  onrendered: function(canvas) 
{  
  var test = document.getElementsByClassName('test');    //finding the div.test in the page  
  $(test).append(canvas);                                //appending the canvas to the div
  var canvas = document.getElementsByTagName('canvas');     
  $(canvas).attr('id','test');                          //assigning an id to the canvas
  var can2 = document.getElementById("test");
  var dataURL = can2.toDataURL("image/png");            //converting the canvas to      image(PNG)      
  document.getElementById("image_test").src = dataURL;  //assigning the url to the image
  $(canvas).remove();                                   //removing the image
},logging:true,background: "#fff",
});

and here is my html

<div class="wrapper">
  <div class="container">
    <div class="test">
      <img src="" id="image_test">
    </div>
  </div>
</div>

Can anybody help me how can i save the image having the id "image_test" in my presentations images folder?

Thanks in advance.

Answer 1

If you're saving the file on a server, you can link the user to the file page. otherwise, you can link to a "fake" path, based on the data

eg:

function download(data){
    document.location = 'data:Application-octet-stream,'+
                         encodeURIComponent(data);
}

http://blogs.adobe.com/cantrell/archives/2012/01/how-to-download-data-as-a-file-from-javascript.html