Menu
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
724
While base64 is fine for transport, do not store your images base64 encoded. Base64 provides no checksum or anything of any value for storage. Base64 encoding increases the storage requirement by 33% over a raw binary format.
The equals sign "=" represents a padding, usually seen at the end of a Base64 encoded sequence. The size in bytes is divisible by three (bits divisible by 24): All bits are encoded normally.
That's a horrible thing to do. Base64 is very space-inefficient. It was designed in part to email binary data between incompatible computers whose byte sizes could be as small as 6 bytes. So typically a Base64 translation of data will be at least twice as big as the original data.
Base64 encoding is a way to encode binary data in ASCII text. It's primarily used to store or transfer images, audio files, and other media online. It is also often used when there are limitations on the characters that can be used in a filename for various reasons.
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
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
