將圖像存儲在localStorage中

我嘗試使用Ajax請求在localStorage中存儲圖像。將圖像存儲在localStorage中

<!DOCTYPE html> 
<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      window.onload = function() { 
       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) { 
         var storedImage; 
         if (localStorage.getItem('imgtest')) { 
          storedImage = localStorage.getItem('imgtest'); 
          alert("get"); 
         } 
         else { 
          storedImage = xmlhttp.responseText; 
          localStorage.setItem('imgtest',storedImage); 
          alert("set"); 
         } 
         document.getElementById("test").style.backgroundImage = 'data:image/png;base64,' + storedImage; 
        } 
       } 
       xmlhttp.open("GET","img.png"); 
       xmlhttp.setRequestHeader("Content-type","image/png"); 
       xmlhttp.send(); 
      } 
     </script> 
    </head> 
    <body> 
     <div id="test" style="width: 100px; height: 100px;"></div> 
    </body> 
</html>

我可以存儲流，但不顯示圖像。

也許是因爲我的編碼，我不知道。你能告訴我我做錯了什麼，或者是否有更好的方法來做到這一點？

來源

2012-11-26 Emilie

沒有人知道嗎？ – Emilie

你有沒有試着用URL（）這樣的：

的document.getElementById（「測試」）style.backgroundImage = 'URL（數據：圖像/ PNG; BASE64，' + storedImage + '）'。

來源

2012-12-05 16:03:34 Marcha

我做過了，但仍然不起作用。 – Emilie

這是一個小圖像，這是否工作？ ' <體風格= '背景：URL（數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEX // wAAAACLx9WPAAAADElEQVQImWNwYGgAAAFEAMFvZzHgAAAAAElFTkSuQmCC）'> ' – Marcha

它正在工作，但事實是我沒有'iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVE X // wAAAACLx9WPAAAADElEQVQImWNwYGgAAAFEAMFvZzHgAAAAAElFTkSuQmCC'我搜索如何獲得它。 – Emilie

您是否嘗試使用POST完成您的請求？

來源

2012-12-05 14:50:04 Florent

是的，我做過了，但問題不在於圖片上的請求，我找到了相同的流。問題是用該流顯示圖像。 – Emilie

將圖像存儲在localStorage中

回答

相關問題