How to save an image to localStorage and display it on the next page

Question

So  basically  I need to upload a single image  save it to localStorage  then display it on the next page   Currently  I have my HTML file upload    lt input type  file  id  uploadBannerImage  onchange  readURL this      gt    Which uses this function to display the image on the page  function readURL input         document getElementById  bannerImg   style display    block        if  input files  amp  amp  input files 0             var reader   new FileReader             reader onload   function  e                document getElementById  bannerImg   src    e target result                     reader readAsDataURL input files 0              The image is displayed instantly on the page for the user to see  They are then asked to fill out the rest of the form  This part is working perfectly   Once the form is complete  they then press a  Save  button  Once this button is pressed  I save all form inputs as localStorage strings  I need a way to also save the image as a localStorage item   The save button will also direct them to a new page  This new page will display the users data in a table  with the image being at the top   So plain and simple  I need to save the image in localStorage once the  Save  button is pressed  and then loan the image on the next page from localStorage   I found some solutions such as this fiddle and this article at moz   a HACKS   Although I am still extremely confused on how this works  and I only really need a simple solution  Basically  I just need to find the image via getElementByID once the  Save  button is pressed  and then process and save the image

User · Accepted Answer

To whoever also needs this problem solved:

Firstly, I grab my image with getElementByID, and save the image as a Base64. Then I save the Base64 string as my localStorage value.

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

Here is the function that converts the image to a Base64 string:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Then, on my next page I created an image with a blank src like so:

<img src="" id="tableBanner" />

And straight when the page loads, I use these next three lines to get the Base64 string from localStorage, and apply it to the image with the blank src I created:

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

Tested it in quite a few different browsers and versions, and it seems to work quite well.

User · Answer

I wrote a little 2 2kb library of saving image in localStorage JQueryImageCaching  Usage    lt img data-src  path to image  gt   lt script gt         img   imageCaching     lt  script gt

User · Answer

I wanted to store a user s uploaded image into localStorage  so I can provide a solution for this situation  I got this to work with a combination of the accepted answer  James H  Kelly s comment  and with reference to the Mozilla docs  I first stored the uploaded image as a Base64 string using a FileReader object     get user s uploaded image const imgPath   document querySelector  input type file    files 0   const reader   new FileReader     reader addEventListener  quot load quot   function             convert image file to base64 string and save to localStorage     localStorage setItem  quot image quot   reader result      false    if  imgPath        reader readAsDataURL imgPath      Then  to read the image back in from localStorage  I simply did the following  let img   document getElementById  image    img src   localStorage getItem  image

User · Answer

You could serialize the image into a Data URI   There s a tutorial in this blog post   That will produce a string you can store in local storage   Then on the next page  use the data uri as the source of the image

User · Answer

document getElementById  file   addEventListener  change    e    gt      const file   e target files 0     const reader   new FileReader      reader onloadend        gt           convert file to base64 String     const base64String   reader result replace  data        replace                     store file     localStorage setItem  wallpaper   base64String          display image     document body style background    url data image png base64   base64String            reader readAsDataURL file        Example CodePen

User · Answer

If your images keep getting cropped  here s some code to get the dimensions of the image file before saving to localstorage  First  I would create some hidden input boxes to hold the width and height values  lt input id  quot file-h quot  hidden type  quot text quot   gt   lt input id  quot file-w quot  hidden type  quot text quot   gt   Then get the dimensions of your file into the input boxes var  URL   window URL    window webkitURL     quot  file-input quot   change function e        var file  img      if   file   this files 0              img   new Image            img onload   function                    quot  file-h quot   val this height                  quot  file-w quot   val this width                      img onerror   function                 alert   quot not a valid file   quot    file type                      img src    URL createObjectURL file              Lastly  change the width and height objects used in the getBase64Image   function by pointing to your input box values FROM function getBase64Image img        var canvas   document createElement  quot canvas quot        canvas width   img width      canvas height   img height   TO function getBase64Image img        var canvas   document createElement  quot canvas quot        canvas width      quot  file-w quot   val        canvas height      quot  file-h quot   val     Also  you are going to have to maintain a size of about 300kb for all files  There are posts on stackoverflow that cover file size validation using Javascript

User · Answer

I have come up with the same issue  instead of storing images  that eventually overflow the local storage  you can just store the path to the image  something like   let imagen   ev target getAttribute  src    arrayImagenes push imagen

User · Answer

Note that you need to have image fully loaded first  otherwise ending up in having empty images   so in some cases you d need to wrap handling into  bannerImage addEventListener  load   function             yuga Nov 1  17 at 13 04   This is extremely IMPORTANT   One of the the options i m exploring this afternoon is using javascript callback methods rather than addEventListeners since that doesn t seem to bind correctly either   Getting all the elements ready before page load WITHOUT a page refresh is critical   If anyone can expand upon this please do - as in  did you use a settimeout  a wait  a callback  or an addEventListener method to get the desired result  Which one and why

[javascript] How to save an image to localStorage and display it on the next page?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to local-storage