从服务器检索图像,将其存储在localStorage中并显示它

Question

这应该很简单,但经过几个小时的摔跤,我仍然无法让它发挥作用.根据firefox的说法,到目前为止,我所有的尝试都导致图像变得"被破坏或被截断".

使用jquery-ajax调用从服务器检索图像:

 $.ajax({
                async: false,
                url: db[key]["DocumentLink"],
                success: function (result2) {

Base64对图像进行编码,并将其存储在localStore中:
在这个例子中,我使用的是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");
                }
})

使用数据网址显示图片:

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:

 <img id="documentHolder" alt="Image view placeholder" src="" />

但是,每次尝试时,firefox都会显示:

Image corrupt or truncated: data:image/jpeg;base64,77+977+977+977+9a<... much longer string>

Url:指向有效的jpeg图像,base64Image.length和错误消息显示var/localStorage实际上包含似乎是base64编码的数据.

有任何想法吗？

Answer 1

• 演示: http ://so.lucafilosofi.com/retrieve-an-image-from-the-server-store-it-in-localstorage-and-display-it

Javascript(AJAX调用)

function LoadImg(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {     
            document.getElementById("documentHolder").src = "data:image/png;base64," + xmlhttp.responseText;
        }
    };    
    xmlhttp.open("GET", 'load.php?LoadImg='+filename );
    xmlhttp.send(null);
}

PHP(load.php)

<?php
 if (isset($_GET['LoadImg'])) {
  header("Content-Type: image/png");
  $file = file_get_contents($_GET['LoadImg']);
  echo base64_encode($file);
}
?>

阅读本文可能对您有所帮助

• Base 64编码与加载图像文件
• 如何在HTML文件中编码图像数据？
• 如何在JavaScript中将字符串编码为Base64？
• 用JavaScript获取图像数据？

PS:也许你Base64错了？

Answer 2

浏览器的大小限制除了localStorage限制为5MB.该数据<img src="data:image/jpeg;base64,...">也受到限制,通常远小于5MB.最简单的方法是通过localStorage传递文件名,让浏览器缓存完成工作.