如何使用 HTML5 或 Phonegap 存储 40.000 张图像？答案

【问题标题】：How to store 40.000 images using HTML5 or Phonegap?如何使用 HTML5 或 Phonegap 存储 40.000 张图像？
【发布时间】：2013-02-15 23:05:40
【问题描述】：

我找了很久，想找到一种方法，可以在 HTML5 中存储大量图片，或者访问本地存储的图片并显示出来。

该应用程序是一个产品订购和目录，就像一个电子商务网站，但对于批量订单，而不是最终客户，每个图像都是一个产品，这就是为什么需要有 40k 个图像的原因。需求来自于要求销售人员可以离线模式使用平板电脑数天、数周，并且只有在连接或想要同步时才与 ERP 同步。

每个销售人员都有一个专用的 Android 平板电脑 Tegra3 Quad-Core，32Gb 用于应用程序。但该应用程序还支持桌面上的 iPad 和 Chrome。

但是我遇到了以下限制：

所以也许我错过了另一种方法来做到这一点？

有没有一种 HTML5 方法来存储大量图像以供离线查看？移动设备不支持 FileSystem API，并且能够在移动设备上运行是一项强烈要求。

【问题讨论】：

为什么需要保存所有 40k 图像？您描述的限制是有原因的 - 这样应用程序就不会占用设备的存储空间。尝试根据用户实际需要离线查看的内容动态缩减列表。
这是一个产品目录，每个产品都有一个图像，有 43.000 个产品。这就是为什么我需要 40k 图像，更新问题以反映要求。
这是一个可怕的想法。您需要回到您的客户那里，找出最畅销的商品，并将这些图片缓存在应用程序中。否则根据需要远程加载图像。
@SimonMacDonald 所有产品都需要在离线模式下可用，这是一个挑战，这是一个 HTML5 应用程序，允许您离线执行订单并在连接后发送它们。应用程序需要在离线模式下工作。应用程序已经实现，只是缺少图像目录。

【解决方案1】：

您可以简单地将其存储在您的 sqlite 数据库中。您可以在产品详细信息表中再添加一个字段（列）。

您可以以 BLOB 格式或 base64 格式存储图像。（在您的数据库中）。

使用phoneGap，您可以轻松地访问您的数据库和数据库中的不同表。

为了提高性能和节省带宽：您可以做的是您可以应用延迟加载图像。每当您下载新图像时，只需将其存储到数据库中即可。

这样您可以避免 I/O 操作，而且如果您使用 MVC，那么在您的产品详细信息对象（Modal 类）中，您还将拥有图像对象。

希望这个建议对你有用:)

【讨论】：

【解决方案2】：

如何运行只能接受本地连接的本地网络服务器？在 Apache 中，配置文件中的“允许来自 127.0.0.1”之类的内容应该可以解决问题。使用本地网络服务器可以让您避开任何 HTML 限制。

【讨论】：

嗯，这是我没想到的……但是你能在 iPad 或 Android 平板电脑上运行本地 Web 服务器吗？我会尝试挖掘这个有点depper，我还需要看看如何在客户端处理这个
还有用新图像更新本地网络服务器的问题......仍然是有趣的调查选项。

【解决方案3】：

解决方案将使用 File API 将 HTML5 应用程序的一个端口传递给 phoneGap 应用程序。

HTML5 不同的实现是这个决定的原因。由于 AppCache 在大多数移动浏览器中非常有限，并且缺乏对 FileSystem API 的支持。您只能在移动浏览器上存储 16-52Mb 的数据，这对需要大量本地存储数据（离线可用）的 HTML5 Web 应用程序来说是一个限制因素。

【讨论】：

我很好奇您是否使用 File API 使用 HTML5 Cordova 应用程序实现了在设备上存储数千张图像的对象。如果是这样，如果你有任何帮助的资源。我的情况基本一样。
嗨，布拉德，最后我创建了一个包含多个图像的 zip 和解压缩。数百个是可以的，但数千个不是很容易管理。有可能，只是不太好。
啊，是的，我们的原生 iOS 应用使用压缩资源，这很有意义。
嘿@Astronaut 你试过github.com/chrisben/imgcache.js 插件吗？关于使用 cordova webapp 支持 40k 图像的任何结论？

【解决方案4】：

虽然是随机的，精灵表？将只创建一个文件并最大限度地减少请求

【讨论】：

【解决方案5】：

Phonegap's own Implementation of the Filesystem API 不应该在移动设备上工作吗？我的意思是这就是为什么首先创建 Phonegap 的原因。

直接来自 FileReader 的 Cordova API 文档：

支持的平台

安卓

BlackBerry WebWorks（操作系统 5.0 及更高版本）

iOS

Windows Phone 7 和 8

Windows 8

【讨论】：

我现在正在测试该解决方案。问题是它在必须支持的桌面上不起作用
从外观上看，Phonegap FS API 应该与桌面浏览器实现的 FS Api 的库存实现一起可用。否则我会创建一个非常薄的抽象层。
感谢您的反馈，不幸的是，我似乎别无选择。生病必须将应用程序移植到 PhoneGap、webSQL 和 webServices，所以这不是微不足道的……很糟糕，我找不到纯 HTML5 的方式来做到这一点。但我不得不尝试向社区发出呼吁。
我不太明白你为什么要移植它。您只需要一个用于 Phonegap 和 HTML5 Filesystem API 的简单抽象层。我会以相当高级的方式设计该层，而不是尝试抽象整个 FS API。
我必须将我目前已经投入生产超过 6 个月的 HTML5 应用程序移植到 phonegap，然后开始项目这一阶段的开发。