1

Have a question similar to this one.

How do you save and load an image to and from localStorage, a personalized cache, using plain JavaScript?

Andria
  • 4,712
  • 2
  • 22
  • 38
Shakti Singh
  • 38
  • 1
  • 1
  • 9
  • Have you tried anything by yourself? Maybe create a variable, assign the file object to it and set it in local storage, get the variable from the local storage when required. As simple as asking how [local storage](https://stackoverflow.com/questions/18247130/how-do-i-store-data-in-local-storage-using-angularjs) works. – Sajal Sep 20 '17 at 10:24
  • Thanks for reply, I am able to store data sucessfully and get it back too. I am facing an issue with the Image storage. – Shakti Singh Sep 20 '17 at 11:16

2 Answers2

3

For storing and retrieving image from local storage you can simply use javascript. Here is an example:

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

    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,/, "");
}

Here is the link to the StackOverflow question

Andria
  • 4,712
  • 2
  • 22
  • 38
Naveed Kamran
  • 453
  • 1
  • 4
  • 16
  • Thank you @Naveed, I tried this but I am getting an error "Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'". Shoul I add something to my project ? I am using angularjs without npm or bower. – Shakti Singh Sep 20 '17 at 11:21
1

this post talks about saving image in the local storage.

dollardhingra
  • 303
  • 4
  • 14