Javascript 在HTML5离线应用程序中使用图像？

我们已经成功地使用HTML5创建了一个离线应用程序。它所做的是将数据存储在indexedDB或localStorage中，当联机时，本地存储和联机数据库将同步。一切都很好，直到我们决定添加上传图像的功能

1） 由于应用程序脱机工作，我们无法在服务器上上载图像，我们将把它们放在哪里

可能的解决办法：

• 脱机时保存路径，当用户联机时，通过创建输入元素并将路径指定给其值属性来上载图像。这种方法的问题是，我们无法更改输入元素的value属性，也无法获得要上载的图像的完整路径。看来这个解决方案不太可能
• 将映像保存在indexedDB或localStorage中，这是否可行

2） 如果我们成功地将图像保存在indexedDB或localStorage中，那么一旦用户联机，我们将如何上载它

可能的解决办法：

• WebSocket-我还没碰过这个
• Flash-它能在iPhone上工作吗？可能不会

3） 如果我们成功地将图像保存在indexedDB或localStorage中，我们将如何在页面上显示它？图像元素使用src属性来确定要显示的图像，是否还有其他方法，如使用图像二进制

如果您以前遇到过同样的情况，您采取了哪些变通方法来实现您的目标？

使用HTML5中提供的方法。您可以在那里“上传”您的图像，然后，当服务器重新联机时，您可以传输它们，甚至可以使用传统的XHR

FileAPI使用安全，因为大多数主要浏览器都支持它：

详细说明：

1） 将文件写入

permament

或

temporary

存储（由我们的应用程序定义）。请注意，

临时

存储在会话退出时被清除（由浏览器自行决定）

有关教程，请参见此处：

2） 我会使用传统的XH请求来传输它们。它更简单且经过良好测试（您不必从头开始设计新的协议）

---

3） 这是最好的：）您可以直接从文件API获得正确的URL，因此图像将从缓存中显示。请参见此处：

将图像转换为base64字符串并存储，然后您可以使用Ajax或任何您喜欢的方式上载它们，您可以将base64字符串放入img元素的src attr中。您可以更好地记录base64的显示问题吗？从未听说过他们+1感谢文件API！我会研究它，也许这就是我所需要的。如果你把IE作为一个浏览器，那么是的，你会有问题。尽管如此，我还是再次检查了一下，问题似乎比以前少了。我将删除我对它的评论。#3个指向

文件系统

API的链接，该文件系统已被弃用（目前）使用Mozilla不支持的FileApi for cache。他们建议用服务代替。