HTML5 iPhone动态缓存图像

前端之家收集整理的这篇文章主要介绍了HTML5 iPhone动态缓存图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们正在为离线工作的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(仍然意味着从源中获取它因此变慢?)然后以某种方式神奇地将其转换为屏幕上的图像….但我不知道如何做到这一点.

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

解决方法

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

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

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

引用

Safari 4.0 and later support direct manipulation of the pixels of a canvas. You can obtain the raw pixel data of a canvas with the getImageData() function and create a new buffer for manipulated pixels with the createImageData() function.

(source on archive.org)

更新:

我发现您可能也感兴趣的这个链接.

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

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

原文链接:https://www.f2er.com/html5/168471.html

猜你在找的HTML5相关文章