我们已经使用 HTML5 成功创建了一个离线应用程序。它的作用是将数据存储在indexedDB或者localStorage中，当在线时，本地存储和在线数据库会同步。一切都很好，直到我们决定添加上传图片的功能。
1) 由于应用程序离线工作，我们不能在服务器上传图片，我们要把它们放在哪里？
可能的解决方案:
- 离线时，保存路径，当用户在线时，通过创建输入元素并将路径分配给其值属性来上传图像。这种方法的问题是我们无法更改 input 元素的 value 属性，也无法获取要上传的图像的完整路径。这个解决方案似乎不太可能。
- 将图像保存在 indexedDB 或 localStorage 中，这可能吗？
2) 如果我们成功将图片保存在 indexedDB 或 localStorage 中，当用户上线后我们如何上传？
可能的解决方案:
- WebSocket - 我还没有接触过这个。
- Flash - 它能在 iPhone 上运行吗？可能不会。
3) 如果我们成功将图片保存到indexedDB或localStorage中，我们将如何在页面上显示它？图片元素使用src属性来决定显示哪张图片，有没有其他方法比如使用图片二值化？
如果您以前遇到过同样的情况，您采取了什么解决方法来实现您的目标？
最佳答案
使用FileAPI在 HTML5 中可用。您可以在那里“上传”您的图像，然后，当服务器重新联机时，您可以传输它们，甚至可以使用传统的 XHR。
FileAPI 可以安全使用，因为大多数主流浏览器都支持它:http://caniuse.com/#feat=fileapi
详细:
1) 将文件写入permament 或temporary 存储(由我们的应用程序定义)。请注意，临时存储在 session 退出时被清除(由浏览器决定)。
教程请看这里:http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript
2) 我会使用传统的 XHRequests 来传输它们。它更容易且经过充分测试(您不必从头开始设计新协议(protocol))。
3) 这是最好的事情 :) 您可以直接从文件 API 获取正确的 URL，因此可以从您的缓存中显示图像。看这里:http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript#toc-filesystemurls
关于javascript - 在 HTML5 离线应用程序中处理图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18504529/