How to store image in local storage not path?

Question

Can we store image in local storage and get the image from the storage. As We store number or string in local storage can we store image not path ? http://jsfiddle.net/sAH8w/

$(function(){
    $('#save').click(function(){
        alert('save')   
        localStorage.setItem("image", https://dl.dropboxusercontent.com/s/t2ywui846zp58ye/plus_minus_icons.png?m=);
    })

    $('#get').click(function(){
        alert('get');
        var image=localStorage.getItem("image");   
    })
})

You should probably look into base64 encoding the image and the saving it as a string in localstorage. — springbo, Jun 24 '14 at 10:04
possible duplicate of [Get image data in JavaScript?](http://stackoverflow.com/questions/934012/get-image-data-in-javascript) — hsz, Jun 24 '14 at 10:05
Seconding @springbo. You should read into size limits too - in my (admittedly out-of-date and limited experience) I found that local storage filled up pretty quickly (and capacity varied a bit between browsers). Some associated reading here: http://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values — Darragh Enright, Jun 24 '14 at 10:06
Hope This helps stackoverflow.com/questions/19183180/how-to-upload-an-image-save-it-to-localstorage-and-then-display-it-on-the-next — Arun, Jun 24 '14 at 10:17

score 1 · Answer 1 · answered Jun 24 '14 at 10:21

1

You can make use of "canvas" element.

// Get a reference to the image element

var elephant = document.getElementById("elephant"); // Take action when the image has loaded

elephant.addEventListener("load", function () {

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);

// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");

// Save image into localStorage
try {
    localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
    console.log("Storage failed: " + e);
} }, false);

answered Jun 24 '14 at 10:21

Sheba

726
7
16

can you use fiddle..I added the image in fiddle external source – Shruti Jun 24 '14 at 10:22
As reviewed code on jsfiddle.net/sAH8w/2, you have made mistakes in formatting of code, due to which when javascript loads, it does not load properly, thus prohibiting execution of your scripts. – Sheba Jun 24 '14 at 10:39
$(function(){ $('#save').click(function(){ alert('save'); alert(getBase64Image("https://dl.dropboxusercontent.com/s/t2ywui846zp58ye/plus_minus_icons.png?m=")); }); $('#get').click(function(){ alert('get'); var image=localStorage.getItem("image"); }); }); – Sheba Jun 24 '14 at 10:40
please provinde fiddle – Shruti Jun 24 '14 at 10:45
I have made the cahnges on fiddle andits working. You need to change it as per your requirement. – Sheba Jun 24 '14 at 11:02
but where is that fiddle – Shruti Jun 24 '14 at 11:54

How to store image in local storage not path?

1 Answers1