HTML5 iPhone动态缓存图像

Question

我们正在为离线工作的iPhone构建Web应用程序.但是我们在缓存动态图像时遇到了困难.请继续阅读,我将通过示例的方式向我展示我的意思以及到目前为止我们所做的工作.

例如,假设我们正在构建一个只有1页的简单列表应用程序.应用程序的唯一目的是列出5个项目,每个项目包含一些文本和1个图像.

该应用程序有一个简单的徽标和一些单独的JavaScript和CSS代码.使用缓存清单文件缓存这些静态资源.

有2个场景:

场景1:我在线,我打开了Web应用程序

当我在Safari中加载列表应用程序时,它将从包含1000个项目的数据库中获取5个新的随机项.这些都是通过AJAX调用(JSON格式)通过简单的后端提供的.

包含5个项目的整个JSON对象将立即存储在HTML5本地存储中并缓存以供脱机使用.

JSON对象的结构有点像这样:

{
    "0" : {
        id: "3",
        text: "Some text about item #3",
        image_url: "http://www.domain.com/image22341.png"
    },
    "1" : {
        id: "23",
        text: "Some text about item #23",
        image_url: "http://www.domain.com/image442321.png"
    },
    "2" : {
        id: "4",
        text: "Some text about item #4",
        image_url: "http://www.domain.com/image2321.png"
    },
    "3" : {
        id: "432",
        text: "Some text about item #432",
        image_url: "http://www.domain.com/image2441.png"
    },
    "4" : {
        id: "43",
        text: "Some text about item #43",
        image_url: "http://www.domain.com/image221.png"
    }
}

如您所见,非常简单(可能是JSON中的一些错误),整个JSON对象存储在本地存储中.

现在使用JavaScript注入HTML(使用CSS设置样式)呈现5个项目,没什么特别的.包含指向图像资源的文本和图像标记的跨度标记已创建等.

在线模式下,一切都很棒.

场景2:我离线了,我打开了Web应用程序

页面加载(显示徽标是因为它使用缓存清单缓存为静态资源),一些JavaScript检测到我们确实脱机,因此应用程序不会尝试联系后端.相反,它从本地存储读取先前存储的JSON对象,并开始渲染5个项目.一切如预期.

文本显示正常,但这次没有显示图像,原因很简单,图像标签指向不可用的图像资源.因此它显示小图像不可用图标.

---

现在我的问题是,有什么办法以某种方式缓存这些图像资源？因此,下次我们需要它们时,它们将从缓存中获取.

这就是我尝试过的:

• Base64对图像进行编码并通过JSON提供它们.这工作但是,它大大增加了抓取和渲染时间(我们说的是增加30秒,非常慢)
• 一些缓存显示黑客攻击/反复试验..无法找到任何有效的东西(理想情况下需要一个政策,'在请求时'缓存域上的所有资源',但据我所知,这不存在)

我真的花了几个小时才找到解决方案......有没有人有线索？我知道这是可能的,因为如果您查看iPhone的Google Mail HTML5应用程序,他们可以以某种方式缓存附件,即使在离线时也可以检索它们.

我们还没有尝试过的一件事就是使用Safari支持的SQLite数据库...也许我可以将图像存储为BLOB(仍然意味着从源中获取它因此变慢？)然后以某种方式神奇地将其转换为屏幕上的图像....但我不知道如何做到这一点.

任何帮助表示赞赏,谢谢.

Answer 1

我建议您看一下是否可以使用画布来保存图像，因为它们具有某些属性来获取/插入图像像素数据，例如像素值 (0-255) 的 CSV。

来源：https ://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PixelManipulation/PixelManipulation.html

我不确定您是否可以在画布中动态使用图像源，但如果可以，您应该能够将 CSVV 数据从图像传输到数据库，反之亦然。

引用

Safari 4.0 及更高版本支持直接操作画布的像素。您可以使用 getImageData() 函数获取画布的原始像素数据，并使用 createImageData() 函数为操作的像素创建新的缓冲区。

（来源：archive.org）

更新：

我发现您可能也对此感兴趣。

http://wecreategames.com/blog/?p=210

http://wecreategames.com/blog/?p=219 //还要注意画布序列化的想法:)