Name a PNG file saved from Canvas using an “open with” dialog

Question

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 al

Answer 1

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.

Answer 2

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

Answer 3

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.