Turn image into Data URL and save in localStorage

image-data-url-localStorage.js

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

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Either I'm misreading or you need to allow CORS from the image server to allow this technique to work.

what is 'localStorage' is referring to?? what kinda object is this?

what is 'localStorage' is referring to?? what kinda object is this?

It is a storage where data is saved. Like cookies, but it can be for local files too and has no expiry (unless you remove it).