图像的HTML5 iPhone动态缓存
我们正在为脱机工作的iPhone构建web应用程序。但是我们在缓存动态映像时遇到了困难。请继续读下去，我将举例说明我的意思和我们迄今所做的事情。
例如，假设我们正在构建一个只有1页的简单列表应用程序。应用程序的唯一目的是列出5个项目，每个项目包含一些文本和1个图像。
应用程序有一个简单的徽标和一些独立的JavaScript和CSS代码。这些静态资源使用缓存清单文件进行缓存。
有两种情况：
场景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对象都存储在本地存储中。
现在，这5项都是使用JavaScript注入的HTML (使用CSS样式)呈现的，没有什么特别之处。创建包含指向图像资源的文本和图像标记的Span标记，等等。
在在线模式下，一切都很好。
场景2:我离线打开web应用程序
页面加载(徽标之所以显示是因为它是使用缓存清单作为静态资源缓存的)，一些JavaScript检测到我们确实处于脱机状态，因此应用程序不会尝试与后端联系。相反，它从本地存储读取先前存储的JSON对象，并开始呈现这5项。一切都如预期。
文本显示得很好，但是这次没有显示图像，原因很简单，图像标记指向不可用的图像资源。所以它会显示那个小图像不可用的图标。
现在我的问题是，有任何方法来缓存这些图像资源吗？因此，下次我们需要它们时，就会从缓存中获取它们。
这就是我尝试过的：
- Base64对图像进行编码，并通过JSON提供它们。这是可行的，但它显着地增加了抓取和渲染时间(我们正在讨论的是30秒的增长，非常慢)。
- 一些缓存清单黑客/试验和错误..。找不到起作用的任何东西(理想情况下，需要一个策略来“在请求时将所有资源缓存在域中”，但据我所知，这并不存在)
我花了好几个小时在这件事上找不到解决办法.有人有线索吗？我知道这是可能的，因为如果您查看用于iPhone的Google应用程序，它们可以以某种方式缓存附件，甚至可以在脱机时检索它们。
我们没有尝试过的一件事是使用Safari支持的SQLite数据库.也许我可以将图像存储为一个BLOB (仍然意味着从提要中获取图像，因此速度慢？)然后神奇地把它转换成屏幕上的图像.但我不知道该怎么做。
任何帮助都是非常感谢的，谢谢。
回答 2
Stack Overflow用户
发布于 2010-08-13 13:01:18
我建议您看看是否可以使用画布来保存图像，因为它们具有获取/插入图像像素数据的某些属性，例如像素值的CSV (0-255)。
我不确定是否可以在画布中动态地使用图像源，但是如果可以的话，您应该能够将CSVV数据从图像传输到DB，而visa反过来。
报价
Safari 4.0及更高版本支持对画布像素的直接操作。您可以使用getImageData()函数获取画布的原始像素数据，并使用createImageData()函数为被操纵的像素创建一个新的缓冲区。
更新：
我发现这个链接你也可能感兴趣。
http://wecreategames.com/blog/?p=210
http://wecreategames.com/blog/?p=219 //还请注意使用画布序列化的思想:)
Stack Overflow用户
发布于 2013-06-02 09:27:54
下面是从AJAX下载图像并将其转换为base64字符串的代码。使用此字符串，您可以将其保存到localStorage，并在脱机时将其分配给img的src属性。
function _arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'an_image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var string_with_bas64_image = _arrayBufferToBase64(this.response);
// You can save this string to local storag or set it to an img elemment this way
document.getElementById("img").src = "data:image/png;base64," + string_with_bas64_image;
}
};
xhr.send();您可以在这里测试它：http://jsbin.com/ivifiy/1/edit
使用这种技术，您可以编写一个localStorage缓存。
从这里提取_arrayBufferToBase64：ArrayBuffer到base64编码字符串
https://stackoverflow.com/questions/3476864
复制相似问题
腾讯云开发者
