jquery canvas image download

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.

I don't want to open it in window, but trigger download on disc. — santBart, Jan 16 '12 at 20:31
And next thing is that when I put it to my img src tag everything is ok, trying to open it in new window cause "This web page is not available". I dont know why. — santBart, Jan 16 '12 at 20:33
http://stackoverflow.com/questions/8888129/cakephp-download-png-file — santBart, Jan 17 '12 at 01:28

Mikko Ohtamaa · Accepted Answer · 2012-09-19T12:22:47.607

2

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

edited Sep 19 '12 at 12:22

answered Jan 17 '12 at 15:40

Mikko Ohtamaa

82,057
50
264
435

jquery canvas image download

1 Answers1

Linked