从 http url 在本地选择图像并在没有服务器往返的情况下提供该图像

Question

我是 Flash 的新手（从未在 Flash 中创建过任何东西）。我非常熟悉 Web 应用程序（基于 J2EE）并且在 Javascript 方面具有相当的专业知识。

这是我的要求。

我希望用户选择（通过 html 表单）图像。通常在帖子中，此图像将被发送到服务器并可能存储在那里以备后用。我不要那个。我想将此图像存储在本地，然后通过 HTTP 将其提供给用户。

所以，流程是： 1.进入“选择图片网址”：mywebsite.com/selectImage

浏览图片并选择图片

这会将控制权转移到客户端上运行的某些代码（Javascript 或 Flash），然后将图像本地存储在客户端计算机上的某个位置。

1. 转到“显示图片网址”：mywebsite.com/showImage

这最终会导致在浏览器上运行一些客户端代码来检索图像并呈现它（无需任何服务器往返。）

我考虑了以下选项：

1. 使用 HTML5 本地存储。由于我是一个完整的闪存新手，因此我对此进行了研究。我发现在 javascript 中存储和检索图像相当简单（只允许使用字符串，但我希望存储 base64 编码的字符串至少适用于小图像）。但是，如何通过指向我的服务器的 http url 提供图像而无需服务器往返？我在http://hacks.mozilla.org/category/fileapi/ 看到了一篇有趣的文章，但这仅适用于 Firefox，我需要在所有最新的浏览器（至少支持 HTML5 本地存储的浏览器）上工作

2. 使用闪存共享对象。好的，这会很好 - 唯一的事情是我不知道从哪里开始。执行此操作的动作脚本片段分散在各处，但我不知道如何在实际的 html 页面中使用这些脚本:) 我不需要创建任何电影或任何东西 - 只需要存储图像并在本地提供它。如果我走这条路，我也会用它在本地存储其他“字符串”。如果您建议这样做，请给我有关如何执行此操作的确切步骤（可能是指向其他网站的指针）。理想情况下，我想避免为任何闪存开发环境软件付费:)

谢谢！

Answer 1

好的 我能够实现以下解决方案（以防万一有人有任何 cmets 或想知道答案）

1. 编写了获取图像并返回其 base 64 编码版本的服务器端代码。
2. 使用隐藏 iframe 技巧将 base 64 编码数据放入 iframe，并通过将图像源动态更改为数据 uri 将其存储到图像中

对于“隐藏的 iframe 技巧” - 如果您有兴趣，有一篇很好的文章（参见 www.openjs.com/articles/ajax/ajax_file_upload/response_data.php）

唯一的限制是 IE 不能处理 base 64 编码字符串超过 32K 的图像 - 请参阅 http://msdn.microsoft.com/en-us/ie/dd578309.aspx。请注意，只有 IE 8 有效 - 我相信 IE 7 不支持数据 uri。

Answer 2

您可以使用a data URI 来显示文件。本质上，您使用图像数据（加上前缀）作为图像元素的src 属性。如果您已经知道如何将文件作为 base64 编码字符串读入内存，那么使用数据 URI 可能是显示图像的最简单方法。