这应该足够简单,但我折腾了几个小时后,仍然无法使其工作。到目前为止,我的所有尝试都导致图像在Firefox中变得“损坏或截断”。
使用jquery-ajax调用从服务器检索图像:
$.ajax({
async: false,
url: db[key]["DocumentLink"],
success: function (result2) {
将图像进行Base64编码,并将其存储在localStorage中:
在这个例子中,我使用的是jquery base64-encoding插件,但我已经尝试了几个。
var dbKey = "Doc " + db[key]["ID"] + " " + db[key]["Title"];
console.log("storing: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
localStorage.removeItem(dbKey);
var base64Image = $.base64Encode(result2);
console.log(base64Image.length);
localStorage.setItem(dbKey, base64Image);
console.log("is stored: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
}
})
使用数据URL显示图像:
function openImageFromDB(dbKey) {
console.log("Trying to display image with key " + dbKey);
var base64Img = localStorage.getItem(dbKey);
document.getElementById("documentHolder").src='data:image/jpeg;base64,' + base64Img;
}
对应的图片:
<img id="documentHolder" alt="Image view placeholder" src="" />
然而,无论尝试多少次,火狐浏览器都会显示:
Image corrupt or truncated: data:image/jpeg;base64,77+977+977+977+9a<... much longer string>
这个URL指向一个有效的JPEG图像,而base64Image的长度和错误信息表明var/localStorage实际上包含了似乎是Base64编码数据的内容。
有什么想法吗?