Skip to content

Instantly share code, notes, and snippets.

@robnyman
Created February 21, 2012 08:29
Show Gist options
  • Save robnyman/1875132 to your computer and use it in GitHub Desktop.
Save robnyman/1875132 to your computer and use it in GitHub Desktop.
Turn image into Data URL and save in localStorage
// 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);
@plumpNation
Copy link

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.

@rajashekhargundeti
Copy link

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

@AthBar
Copy link

AthBar commented Jun 16, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment