Name A PNG File Saved From Canvas Using An "open With" Dialog

I am working with canvas and I would be able to save my Canvas to png. By looking around, I discover the great toDataURL() function given by the W3C. I am also already using the ca

Solution 1:

if you aim to only modern browsers and don't care cross-browser that much, there's a possible solution with "download" attribute of element. Here's one sample for your information:

<a target="_blank" href="https://www.google.com/intl/en_com/images/srpr/logo3w.png" download="testXXX.jpg">DOWNLOAD ME!</a>

Only one line, no javascript, yeah! You can change the href part into data url, and that works too.

Check this Eric's tutorial on html5rocks for more details.

Solution 2:

Unfortunately not. Currently data URIs (used by that canvas2image module; quite neat, actually) do not support specifying filename or content-disposition headers, so the only way to force the browser to generate a save as dialog is to set the content-type to octet-stream.

Solution 3:

Well, in the real world web applications Hangrui Gao's solution is far from acceptable, according to

http://caniuse.com/#feat=download

you'll deny this feature to all IE, Safari, IOS Safari, Android's users.

I think that given this limit in Canvas2Image, a better solution is to use some server side logic as explained here

Linuxatico