從服務器中檢索圖像，將其存儲在localStorage中，並將其顯示出來

Question

這應該很簡單，但經過數小時的摔跤之後，我仍然無法使其工作。據firefox稱，到目前爲止，我所有的嘗試都導致圖像「損壞或被截斷」。

從服務器檢索與一個jquery-AJAX調用圖像：

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

的Base64編碼圖像，並將其存儲在localStore：
在這個例子中我使用的base64編碼jquery的插件，但我已經嘗試了幾個。

     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：

<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.length和錯誤消息顯示var/localStorage實際上包含似乎是base64編碼數據的內容。

任何想法？

Answer 1

• DEMO：http://so.devilmaycode.it/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 encode vs loading an image file
• How to encode image data within an HTML file?
• How can you encode a string to Base64 in JavaScript?
• Get image data in JavaScript?

PS：也許你Base64是錯誤的？

Answer 2

原來，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, 0, (int)fs.Length); 
       base64 = Convert.ToBase64String(buffer); 
      } 
     } 
     catch (IOException e) 
     { 
      return filename + "/" + e.Message; 
     } 
     return base64; 
    } 

請注意，此代碼是不安全的直接暴露給外部世界。 我個人使用一個包裝函數來分析數據庫的路徑。

Answer 3

您可以使用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, 0); 
     try { 
      var dataUri = canvas.toDataURL();  
     } catch (e) { 
      console.log("D'oh!"); // Improve this error handling, obviously. 
     } 

dataUri現在將包含用於將含有，具有短的前綴時，圖像的基64編碼沿着圖像數據的URI。

確保爲畫布支持添加檢測。 IE 8及更高版本不支持它。

Answer 4

瀏覽器具有除5MB localStorage限制以外的大小限制。 <img src="data:image/jpeg;base64,...">的數據也受到限制，通常遠小於5MB。最簡單的方法是隻通過localStorage傳遞文件名，並讓瀏覽器緩存完成工作。