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 : /

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

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

• javascript
• html
• canvas

3 Answers 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.

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.

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