当用户保存时如何控制base64图像 [英] How to control base64 images when user saves as

问题描述

我正在制作一个应用程序，我想向用户展示一系列base64编码图片。它们通过使用数据网址显示。如果用户想要保存图片，可以直接点击并保存为（或将其拖放到文件夹中）。

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

有没有办法控制所谓的文件名？现在，Chrome只是使用下载，甚至不将其识别为图像。这可以以任何方式完成吗？

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?

我只需要它在Chrome上工作。

I only need it to work in Chrome.

感谢任何帮助

推荐答案

确保您在数据uri中为图像设置正确的MIME类型。这样做会修复Chrome 17中的文件扩展名。该文件被下载为download.png，并且打开正常。

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=="/>

但是，如果您真的需要完全控制文件名，可以利用html5下载属性的 a 标签，以设置文件名，并创建一个Blob对象与您的图像数据将被使用。

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.

请见演示： http：// updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

阅读更多： http://dev.w3.org/2009/dap/file-system/file-writer .html

这篇关于当用户保存时如何控制base64图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！