如何使用 JavaScript 保存图像？答案

【问题标题】：How to save an image with JavaScript?如何使用 JavaScript 保存图像？
【发布时间】：2011-06-24 15:10:12
【问题描述】：

我正在开发 Chrome 扩展程序：当您拖动图像时，它会保存到您的计算机上。
我了解到在 HTML5 中有 FileWriter API，但实在找不到任何示例，Chrome 是否支持它？

【问题讨论】：

标签： javascript html google-chrome-extension download

【解决方案1】：

不，HTML5 中没有 FileWriter API。您可能的意思是File API 允许您读取文件。出于安全原因，在 Chrome 中甚至不允许扩展程序写入文件。因此，除非您想将 NPAPI 插件与您的扩展程序捆绑在一起（这会在安装时触发一个巨大的警告），否则您所能做的就是触发用户可能选择接受或不接受的下载消息。有关可能的方法，请参阅Cross-browser Save As .txt（另一种方法是像 Downloadify 这样的 Flash 对象）。

编辑：我错了，有一个 FileWriter API 提议。然而，这还远未完成。

【讨论】：

【解决方案2】：

我找到了这个。 http://www.html5rocks.com/en/tutorials/file/filesystem/ 你可以找到一些例子。

编辑这是文章的截图。我正在使用 chrome 12.0

FileWriter API browser support message http://s3.amazonaws.com/twitpic/photos/full/329503613.png?AWSAccessKeyId=AKIAJF3XCCKACR3QDMOA&Expires=1308932374&Signature=DXBdFSjbNqaeJPr%2F0fSAqPWyh2E%3D

【讨论】：

我明白了，显然有一项提议允许对用户磁盘的某些部分进行读/写访问，这与我在回答中所说的相反。然而，该提议处于早期阶段，可能永远不会被任何浏览器实施（安全问题似乎仍未解决）。
@Wladimir 文章说 chrome 和我的浏览器 (chrome) 似乎支持本文中使用的所有功能。我会上传屏幕截图。

【解决方案3】：

我不认为 FileWriter API 将在一段时间内准备就绪并可用。

您可以获取十六进制的图像数据，然后使用 DataURI 从浏览器中“导出”它。尽管这会导致文件以“download(1)”之类的文件名保存。每个浏览器似乎对 DataURI 有不同的大小限制，而且它们并不大，尽管对于合理大小的图像来说应该没问题。

http://en.wikipedia.org/wiki/Data_URI_scheme

或者，您可以使用 Downloadify 以正确的文件名保存它（需要 flash 并且可能很难嵌入到 chrome 扩展中）。

http://davidwalsh.name/downloadify

【讨论】：