Question

I have my canvas element and some div, which after clicking I wish open downloading the “canvas snapshot”. Over now I have:

$("#save").live('click', function(e)
{
    var image = canvas.toDataURL("image/png", true); 
    var imageElement = document.getElementById("myPics");
    imageElement.src = image;
 });

What displays the Image – so it is ok, but what I want is formula which will cause automatic download of this picture to users computer, after clicking #save div.

Answer 1

The saving of the image can be done using HTML5 blobs.

http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-writing

You can get Blob out of the <canvas> like done in this code:

https://github.com/miohtama/Krusovice/blob/master/src/tools/resizer.js