如何使用HTML5或Phonegap存储40,000张图片？

Question

我已经寻找了很长时间来存储大量图像在HTML5中，或者访问本地存储的图像并显示它们。

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

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

然而，我遇到了以下限制：

1. 使用html5离线（应用缓存）- 在iOS设备上的限制为50Mb，并且很难管理清单文件。
2. 使用带有base64编码图像的webSQL数据库。相同的大小限制（50Mb）。
3. 使用带有base64的localCache，再次大小限制（5至10Mb）。
4. 将我的HTML5应用程序转换为使用PhoneGap文件API，但然后我失去了Windows PC的桌面支持，并且存在一些Web服务问题。

那么，也许我错过了其他的方法？

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

- Astronaut

---

你为什么需要保存所有的40k张图片？你所描述的限制是有原因的，那就是为了防止应用程序占用设备的存储空间。尝试根据用户实际需要离线查看的内容动态地缩减列表。 - freejosh

这是一个产品目录，每个产品都有一张图片，总共有43,000个产品。这就是为什么我需要拥有40,000张图片，并更新问题以反映要求。 - Astronaut

这是一个可怕的想法。你需要回到客户那里，了解他们的热门销售产品，并将这些图片缓存到应用程序中。否则，按需远程加载这些图片。 - Simon MacDonald

@SimonMacDonald 所有产品都需要在离线模式下可用，这是一个HTML5应用程序，允许您在离线时执行订单并在连接后发送它们。该应用程序需要在离线模式下工作。该应用程序已经实现，只缺少图像目录。 - Astronaut

Answer 1

“Phonegap自己的文件系统API实现”不应该在移动设备上工作吗？我是说这就是Phonegap创建的原因。从FileReader的Cordova API文档中可以看到，支持的平台包括Android、BlackBerry WebWorks（5.0及以上版本）、iOS、Windows Phone 7和8以及Windows 8。”

- Oliver Weichhold

---

我现在正在测试那个解决方案。问题是它不能在需要支持的桌面上运行。 - Astronaut

从外观上看，Phonegap FS API 应该在桌面浏览器实现的 FS Api 的股票实现中可用。否则，我将创建一个非常薄的抽象层。 - Oliver Weichhold

谢谢您的反馈，不幸的是看起来我没有其他选择了。我必须将应用程序转移到PhoneGap，使用webSQL和webServices进行端口转换，这并不容易...很遗憾我找不到一个纯HTML5的方法来实现这一点。但我必须尝试并呼吁社区的帮助。 - Astronaut

啊，现在我明白了。我误读了问题标题。我以为你已经有 Phonegap 项目了。 - Oliver Weichhold

当时HTML5已经足够了，现在需要满足一些非常特定的要求，需要访问比HTML5中提供的资源更多的资源。 - Astronaut

Answer 2

该解决方案将使用文件API将HTML5应用程序的端口传递到PhoneGap应用程序中。

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

- Astronaut

---

我很好奇您是否在使用HTML5 Cordova应用程序和文件API将数千张图像存储在设备上的过程中达到了您的目标。如果是这样，您是否有任何资源可以帮助我解决基本相同的问题。 - BradGreens

嗨，Brad，最终我创建了一个带有多个图像的压缩包并进行了解压。处理数百张图片还好，但处理成千上万张就不太容易管理了。虽然这是可能的，但并不是很理想。 - Astronaut

啊，是的，我们的本地iOS应用程序使用压缩的资源文件，这很合理。 - BradGreens

嘿，@Astronaut，你有没有尝试过 https://github.com/chrisben/imgcache.js 插件？对于使用 Cordova Web 应用程序支持 40k 张图片有什么结论吗？ - oak

Answer 3

如何运行一个只能接受本地连接的本地Web服务器？在Apache中，配置文件中类似于“Allow from 127.0.0.1”的设置应该可以解决问题。使用本地Web服务器可以避开任何HTML限制。

- Mark Leighton Fisher

---

呃，这是我没有考虑过的东西……但是你能在iPad或Android平板电脑上运行本地Web服务器吗？我会尝试深入挖掘一下，还需要看看如何在客户端处理这个问题。 - Astronaut

还有一个问题是更新本地网页服务器上的新图片... 这仍然是一个值得探究的有趣选择。 - Astronaut

Answer 4

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

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

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

为了获得更好的性能并节省带宽： 您可以采用图像的延迟加载方法。每当您下载新图像时，只需将其存储到数据库中即可。

这样，您就可以避免I / O操作，并且如果您正在使用MVC，则在产品详细信息对象（模型类）中还将具有图像对象。

希望这些建议对您有所帮助 :)

- Umang9

Answer 5

随机想到，精灵表？可以只用一个文件，减少请求

- user2135947

---

欢迎来到Stack Overflow！您能详细解释一下您的答案，并提供更多关于如何做和带来什么优势的信息吗？ - Yannick Blondeau

我其实考虑过这个问题。但是需要按名称引用图像，而且没有简单的方法来对它们进行分组。 - Astronaut