How to control base64 images when user saves as

问题

I'm making an app where i want to show the user a range of base64 encoded picture. They are shown by using data-url. If the user wants to save a picture, it can simply rightclick and save as (or drag it into a folder).

Are there any way to control the sugested filename? Right now Chrome just sugest "download" and doesn't even recognize it as an image. Can this be done in any way?

I only need it to work in Chrome.

Thanks for any help

回答1:

Make sure you are setting the proper mime type for the image in the data uri. Doing this fixed the file extension in Chrome 17, for me. The file was downloaded as "download.png", and opened fine.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

However, if you really need full control over the filename, you can exploit the html5 "download" attribute of the a tag, to set the filename, and create a Blob object with your image data that will be used be downloaded.

See a demo here: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

Read more here: http://dev.w3.org/2009/dap/file-system/file-writer.html