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

问题描述

|| 这应该很简单，但是经过数小时的努力，我仍然无法正常工作。根据firefox的介绍，到目前为止，我的所有尝试都导致图像“损坏或被截断”。 使用jquery-ajax调用从服务器检索图像：

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

Base64对图像进行编码，并将其存储在localStore中： 在此示例中，我使用的是jquery base64编码插件，但是我尝试了几种。

                        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编码的数据。 有任何想法吗？     

解决方法

     演示：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

错误？     ,浏览器具有5MB的本地存储限制以外的大小限制。

<img src=\"data:image/jpeg;base64,...\">

的数据也受到限制，通常小于5MB。解决此问题的最简单方法是仅通过localStorage传递文件名，然后让浏览器缓存完成工作。     ,事实证明，AJAX无法用于可靠地传输二进制数据。解决方案是在服务器端运行Base64编码，并通过AJAX传输结果字符串。 上面的php代码有效。对于正在寻找ASP.Net / C＃解决方案的人：

    public string Image(string relpath)
    {
        Response.ContentType = \"image/jpeg\";

        string base64;
        string filename = Request.PhysicalApplicationPath + relpath;
        try
        {
            using (var fs = new FileStream(filename,FileMode.Open,FileAccess.Read))
            {
                var buffer = new byte[fs.Length];
                fs.Read(buffer,(int)fs.Length);
                base64 = Convert.ToBase64String(buffer);
            }
        }
        catch (IOException e)
        {
            return filename + \" / \" + e.Message;
        }
        return base64;
    }

请注意，此代码并不安全，无法直接向外界公开。 我个人使用了包装函数来解析数据库的路径。     ,您可以使用HTML5 canvas元素通过JavaScript获取数据uri（将包含base 64编码）。

        // I\'m assuming here you\'ve put the image in an <img> tag on the page already.
        // If not,you\'ll need to adapt this a bit,or perhaps this approach is just
        // not right for your situation.
        var image = document.getElementById(\'id-of-image-you-want\');

        var canvas = w.document.createElement(\"canvas\"); 
        canvas.width = image.width;
        canvas.height = image.height;

        var ctx = canvas.getContext(\"2d\");
        ctx.drawImage(image,0);
        try {
            var dataUri = canvas.toDataURL();    
        } catch (e) {
            console.log(\"D\'oh!\"); // Improve this error handling,obviously.
        }

“ 11”现在将包含图像的数据uri，该数据uri还将包含一个短前缀以及图像的base 64编码。 确保添加对画布支持的检测。 IE 8和更早版本不支持它。