Store image to localStorage

Question

Hai iam currently working with a page to get a image from the json and want to store localy.. This is my code...

<!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>

And below is my 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 getting image from it but i cant store it localy i searched for long time from that iam only getting the solutions using canvas..Here iam looking for solutions other than canvas is it possible??...Waiting for your valuble commands Thanks

`localStorage` can only store strings - you'd have to serialise the image into some sort of format. — Qantas 94 Heavy, Nov 22 '13 at 09:40
Note that you may run into space problems because local storage only allows storing a few MB in data. — helpermethod, Nov 22 '13 at 10:05

score 3 · Answer 1 · answered Nov 22 '13 at 09:58

You could try to download the imgage via a binary XMLHttpRequest, then convert the raw binary data to base64 and store it.

Be aware of the same origin policy, see http://en.wikipedia.org/wiki/Same-origin_policy

The code should look similar to this:

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);

}

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Here you have example how you can convert your image to string and then save it in localStorage. A bit complex but maybe will help you. How to store and retrieve image to localStorage?

edited May 23 '17 at 10:25

Community

1
1

answered Nov 22 '13 at 09:45

scx

2,749
2
25
39

Sorry, but the questioner asked for "_solutions other than canvas_"... You might want to note that it's generally frowned upon to post just a link for an answer -- answers should be able to be understood on their own without the link (though of course you can use the link to support your answer). If you'd like to do so, you can use a comment for this purpose. – Qantas 94 Heavy Nov 22 '13 at 09:46
@scx:Thanks for your replay..but i cant use canvas...is there other solutions...?? – Manu Nov 22 '13 at 09:49
Well part of the answer in link submited was about FileReader but you do not have the file locally I suppouse. Maybe you could use another storage option like writing the file to the HTML5 Filesystem( http://www.html5rocks.com/en/tutorials/file/filesystem/) or stashing it in IndexedDB? – scx Nov 22 '13 at 09:58

Store image to localStorage

2 Answers2