将映像存储到本地存储

Store image to localStorage

本文关键字：存储 映像      更新时间：2023-09-26

Hai目前正在处理一个页面，从json中获取图像，并希望在本地存储。。这是我的密码。。。

<!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"
            },
                        ]

我从中获取图像，但我无法将其存储在本地。我从中搜索了很长时间，我只使用canvas获取解决方案。。我正在寻找画布以外的解决方案有可能吗？？。。。等待您的valuble命令感谢

您可以尝试通过二进制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);

}

这里有一个如何将图像转换为字符串，然后将其保存在localStorage中的示例。有点复杂，但可能会对你有所帮助。如何将图像存储和检索到localStorage？

相关文章：