Menu
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!
424
To save an image to localStorage and display it on the next page with JavaScript, we can create a canvas, put the image in it, and then convert the canvas data to a base64 string. const getBase64Image = (img) => { const canvas = document. createElement("canvas"); canvas. width = img.
This is how you do it: var save = document. createElement('a'); save. href = $('#myImageID').
To get items from localStorage, use the getItem() method. getItem() allows you to access the data stored in the browser's localStorage object.
Get the localStorage on the second page; try something like this: window.onload = function () { var picture = localStorage.getItem ('image'); var image = document.createElement ('img'); image.src = picture; document.body.appendChild (image); }; Then what would I place on the next page to load the image?
As we established above, localStorage only supports strings, so what we need to do here is turn the image into a Data URL. One way to do this for an image, is to load into a canvas element.
But since localStorage is just string-based, saving a long string with no form of structure isn’t optimal. The idea here is to be able to take an image that has been loaded into the current web page and store it into localStorage.
After adding the image to the DOM, this function calls saveImages () and then window.location.reload (). Because of that, it is basically superfluous to add the image to the DOM and then reload the page. That function could basically be reduced to the following, utilizing the loadStorage () function to add the images.
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)
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
