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 also already using the canvas2image from nihilogic that we can found on this page : http://www.nihilogic.dk/labs/canvas2image/

I noticed that on canvas2image, the developpers use the "image/octet-stream" which open the "open with" dialog box but give some problem :

-picture name is the ascii returned by toDataUrl().

-file extension is .part when downloaded

In short, I would prompt the "open with" dialog box with something like "myImage.png" when clicking on a button.

Is it possible ? Any help would be appreciated.

Edit : I have the contraint to use only Javascript, I can't use some nice PHP trick

Answer 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.

Answer 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.