Loading an image to localStorage and setting an image src to that location

html, javascript, local-storage

Solution

Well you can store the actual image data in localStorage (though be wary - there's a limit)

Have a look at the HTML5 rocks tutorial & scroll down to the bit headed READING FILES

Here the file is being read then the output put in the img:src tag. You could additionally put it in localStorage

Example: http://jsfiddle.net/8V9w6/ - select an image file, see the thumbnail? Then reload the page. The thumbnail should remain there. (Works latest Chrome/Firefox)

Problem

I've successfully allowed for a user to upload an image to local storage but I want to be able to then take that image and fill an image element on the page with that. ``` <h3>Please upload the image you wish to use.</h3> <input id="photoin" type="file" accept="image/*;capture=camera"></input> <a href="#delete_1" data-role="button" onClick="save()">Submit</a> <script> var i = 0; function save(){ var input = document.getElementById("photoin").value; var name = "photo_" + i; localStorage.setItem(name, input); $("#QR").src = window.localStorage[name]; i++; } </script> ``` I'm looking for something that will successfully give me the URL of the image in storage, seeing as "window.localStorage[name]" only returns the value paired with that key. Thanks!

Original source

Related problems