javascript - 将图像数据保存到客户端存储 : canvas vs xhr, blob vs arraybuffer

Question

我正在尝试让我们的网络应用缓存和显示离线模式的图像，而存储部分已完成(默认为 IndexedDB 并为某些设备回退到 WebSQL)，我不确定是否:

1. Canvas 或 XHR 是获取图像数据的更好选择。

2. Blob 或 ArrayBuffer 是存储图像数据的更好选择。

3. 我不知道这两个问题是否有其他选择。

关于 stackoverflow 的类似主题有许多讨论(引用 1，2)。但很多问题是在 2012 年提出的，当时 FileSystem API 还没有被弃用，IndexedDB 支持也没有普及。

现在是 2014 年了。我想为 IndexedDB 存储找到一个明确/最佳实践的答案，同时考虑到 WebSQL。以下是我的研究(截至 2014.09):

对于第一季度:

• Canvas 方法的优点是不需要额外的请求，但是 toBlob 方法大多数浏览器不支持，dataUrl 和 Blob 之间的转换很可能是 CPU 密集型的。此外，我们将丢失图像元数据并需要处理跨源问题。

• XHR 方法避免了 canvas 的缺点，但引入了对每个图像的额外请求，除非它们已经被浏览器缓存。主要优点是支持 xhr2 的现代浏览器可以本地返回二进制响应作为 Blob 或 ArrayBuffer。

对于第二季度:

• 一般来说，如果您不是在操作二进制数据，那么Blob 是更好的选择，尤其是对于图像缓存和显示，因为您需要调用.createObjectURL 无论如何都使用 Blob。

• 但 Chrome 在 IndexedDB(fixed in Chrome 38，尚未发布)中对 Blob 类型的支持存在缺陷，而对于 WebSQL，常见的解决方案是使用 base64。这两者都表明 ArrayBuffer 可能是更兼容的选择。

关于其他潜在解决方案的说明:

• localStorage 不适合内容图像存储，因为它有 5MB 的上限。其他问题包括同步 api(阻塞 IO)和不支持二进制内容。

• appcache 非常适合静态 Assets (资源 url 已知)，但对于内容图像缓存来说，它们管理起来令人头疼。

我无法找到充分考虑每种选择的兼容性和性能的讨论/文章。 stackoverflow 社区可以帮助我吗？

---

更新:

考虑到它的值(value)，我决定使用 XHR + Blob 组合。我的主要推理:

1. 简单:with XHR2检索 blob 就像设置 xhr.responseType = 'blob'

一样简单

2. Native:整个流程基于native api，从XHR Blob，到storing Blob in IndexedDB , 生成 Object URL用于图像显示。它可能不一定意味着更好的性能，但它肯定会减少应用程序代码中对数据转换的需求。

3. 设计:图像缓存对我们的服务并不重要，因此我决定只支持具有适当 IndexedDB 和 XHR2 的浏览器。

Answer 1

您似乎很快就忽略了专为您的用例构建的 AppCache。是的，Manifest 不是最容易使用的功能，但功能正是您所需要的。

您提到很难管理 Manifest 文件。但是，如果您可以为您的自定义解决方案生成要离线存储的文件列表，则可以使用相同的逻辑动态生成 Manifest 文件。只需确保您的 list 文件不是静态文件，而是使用您选择的服务器端语言生成的。

对我来说，重新实现浏览器的一个重要的完整功能总是比使用内置的东西更棘手，这对我来说似乎很自然，所以再试一次 AppCache。浏览器支持也更广泛。