How to store and retrieve image to localStorage?
26,023
Here the complete solution using File Api
<html> <body> <input type="file" id="image-input" /> <img id="image-container" /> <script type="text/javascript"> (function(){ /** @type {Node} */ var imgInput = document.getElementById( "image-input" ), /** @type {Node} */ imgContainer = document.getElementById( "image-container" ), /** Restore image src from local storage */ updateUi = function() { imgContainer.src = window.localStorage.getItem( "image-base64" ); }, /** Register event listeners */ bindUi = function(){ imgInput.addEventListener( "change", function(){ if ( this.files.length ) { var reader = new FileReader(); reader.onload = function( e ){ window.localStorage.setItem( "image-base64", e.target.result ); updateUi(); }; reader.readAsDataURL( this.files[ 0 ] ); } }, false ); }; updateUi(); bindUi(); }()); </script> </body> </html>
Author by
Ed Jones
Learning web programming from scratch somewhere 70 miles from a city with programmers...wasn't perhaps my brightest idea.
Updated on April 19, 2020Comments
-
Ed Jones about 4 years
Thought I had this, but no. The goal: snap a photo (insurance card), save it locally, and retrieve it later.
// Get a reference to the image element var elephant = document.getElementById("SnapIt_mobileimage_5"); var imgCanvas = document.createElement("canvas"), imgContext = imgCanvas.getContext("2d"); // Make sure canvas is as big as the picture imgCanvas.width = elephant.width; imgCanvas.height = elephant.height; // Draw image into canvas element imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height ); console.log( 'Did that' ); // Get canvas contents as a data URL var imgAsDataURL = imgCanvas.toDataURL("data:image/jpg;base64,"); // Save image into localStorage try { localStorage.setItem("elephant", imgAsDataURL); } catch (e) { console.log("Storage failed: " + e); }; //Did it work? var pic = localStorage.getItem("elephant"); console.log( elephant ); console.log( pic );
Each step succeeds, the final output is:
<img id="SnapIt_mobileimage_5" class=" SnapIt_mobileimage_5" name="mobileimage_5" dsid="mobileimage_5" src="files/views/assets/image/IMG_0590.JPG"> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
On a new page, when I ask
var policy_shot = localStorage.getItem( 'elephant' ); console.log( policy_shot ); $('#TestScreen_mobileimage_1').src = policy_shot ;
It logs the binary:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ....
But the image doesn't appear.
- Is there a simpler approach?
- Why is the getItem (binary) preceded by data:image/png; instead of data:image/jpg ?
- Is that why it doesn't display, or am I doing something else wrong?