javascript - 将图像存储到 localStorage

标签 javascript json html

Hai iam 目前正在处理一个页面以从 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 获得解决方案。我在这里寻找 Canvas 以外的解决方案 有可能吗??...等待您宝贵的命令谢谢

最佳答案

您可以尝试通过二进制 XMLHttpRequest 下载图像,然后将原始二进制数据转换为 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);

关于javascript - 将图像存储到 localStorage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20141549/

相关文章:

json - 使用模型名称将 JSON 绑定(bind)到 View (SAPUI5)

从 Dropdown 获取值时 JavaScript 不工作

javascript - Meteor-Random - 如何知道生成器是强还是弱

javascript - 使用 withRouter 包装的组件测试按钮的状态

javascript - 如何跟踪哪个 Javascript 使用给定的 HTML 元素进行操作?

php - 如何获取wordpress帖子的描述和标题?

javascript - 如何在 Angular 4中的依赖注入(inject)之前从服务器加载路由配置?

json - 当没有行时,如何让 JSON 子查询返回空数组而不是 null

html - -moz-transition 在我的 CSS 中不起作用

javascript - 编辑器中的 wordpress 双引号问题