2013-11-22 40 views
1

海IAM目前与网页的工作,从JSON获得的图像,并希望localy存储.. 这是我的代码...专卖店形象到localStorage的

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="eventorig.json"></script> 

</head> 
<body> 
    <img class="imageClass" src=""></img> 
</body> 
<script> 
var url; 

$(".imageClass").attr("src",localStorage.UrlImage); 
for(var i in jsonData) 
     { 
      for(var j in jsonData[i].Events) 
       { 

     for(var key in jsonData[i].Events[j].Images) 

        { 



     url=jsonData[i].Events[j].Images[key].ImageUrl; 

    if(typeof(Storage)!=="undefined") 
        { 

       localStorage.UrlImage=url; 

          } 
         else 
          { 

    document.getElementById("result").innerHTML="Sorry, your browser does not support 
     web storage..."; 

          } 


        } 
       } 
    console.log($(".imageClass").attr("src"));  
     } 
    </script> 
    </html> 

及以下的json

 var jsonData={"ResponseCode":0, 
     "ApiVersion":0, 
     "Data": 
     {"Events": 

       [ 
      { 
       "Id":1124, 
       "ImageCaption":"Hip flask", 
       "ImageUrl":"https://s3-ap-southeast- 
             2.amazonaws.com/drugdetectionapp- 
             media/1004/alcohol_para.jpg", 
       "Description":"des", 
       "DateUpdated":"2013-11-06T16:55:55" 
      }, 
         ] 

IAM从中获取图像,但我不能存储它localy我搜索了很长一段时间从IAM只获得使用canvas..Here IAM寻找比帆布 其他解决方案的解决方案是有可能?? ...等待为您的有价值的命令谢谢

+1

'localStorage'只能存储字符串 - 你必须将图像串行化成某种格式。 –

+0

所以我怎么能存储图像....这是不可能的 – Manu

+2

我想你可以将它存储为一个基地64编码字符串... – BenM

回答

0

在这里你有一个例子,你可以如何将你的图像转换为字符串,然后将其保存在localStorage中。有点复杂,但也许会帮助你。 How to store and retrieve image to localStorage?

+0

对不起,但提问者要求提供“_solutions以外的画布_”......您可能想要指出,通常只会发布一个答案链接 - 答案应该能够在没有链接的情况下自行理解(尽管你可以使用链接来支持你的答案)。如果您想这样做,您可以为此目的使用评论。 –

+0

@scx:感谢您的回放..但我不能使用画布......是否有其他解决方案......? – Manu

+0

有关链接submited中的答案部分是关于FileReader,但您没有本地我支持的文件。也许你可以使用另一个存储选项,如将文件写入HTML5文件系统(http://www.html5rocks.com/en/tutorials/file/filesystem/)或将其存储在IndexedDB中? – scx

3

您可以尝试通过二进制XMLHttpRequest下载imgage,然后将原始二进制数据转换为base64并存储它。

注意同源策略,请参阅http://en.wikipedia.org/wiki/Same-origin_policy

的代码应类似于此:

var req = new XMLHttpRequest(); 
req.open("GET", https://s3-ap-southeast-2.amazonaws.com/drugdetectionapp-media/1004/alcohol_para.jpg", true); 
req.responseType = "arraybuffer"; 

req.onload = function (event) { 
    var buffer = req.response; 
    if (buffer) { 
    var byteArray = new Uint8Array(buffer); 
    // Maybe you could also use buffer directly here... 
    var b64 = btoa(byteArray); 
    localStorage.setItem("imageData", b64); 
    } 
}; 
req.send(null); 

}