Last active
November 1, 2024 17:10
-
-
Save pivanov/5135018 to your computer and use it in GitHub Desktop.
Convert images to base64 and put them to localstorage. It's not perfect but it's fun :)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function localstorageImages(ids, version) { | |
var elements = ids, | |
path = '/assets/img/home-page/', | |
isIE = navigator.userAgent.match(/MSIE\s(?!9.0)/), | |
image, | |
storageFiles, | |
storageFilesVersion, | |
version; | |
for (var i = 0, il = elements.length; i < il; i++) { | |
image = document.getElementById(elements[i]); | |
if (isIE && isIE !== null ) { | |
// set image src | |
image.src = (path + elements[i] + ".png?" + Number(new Date())); | |
} else { | |
storageFiles = JSON.parse(localStorage.getItem("storageFiles" + (i + 1))) || {}, | |
storageFilesVersion = storageFiles.version, | |
version = version || 1; | |
if (typeof storageFilesVersion === "undefined" || storageFilesVersion < version) { | |
// set image src | |
image.setAttribute("src", path + elements[i] + ".png?" + Number(new Date())); | |
(function (i) { | |
// when the image has loaded | |
image.addEventListener("load", function () { | |
var imgCanvas = document.createElement("canvas"), | |
imgContext = imgCanvas.getContext("2d"), | |
imgW = this.width, | |
imgH = this.height; | |
// canvas size = image size | |
imgCanvas.width = imgW; | |
imgCanvas.height = imgH; | |
// draw image | |
imgContext.drawImage(this, 0, 0, imgW, imgH); | |
// image to base64 | |
storageFiles.image = imgCanvas.toDataURL("image/png"); | |
// version for localStorage | |
storageFiles.version = version; | |
// save as JSON | |
localStorage.setItem("storageFiles" + (i + 1), JSON.stringify(storageFiles)); | |
}); | |
})(i); | |
} else { | |
// image from localStorage | |
image.setAttribute("src", storageFiles.image); | |
} | |
} | |
} | |
} | |
//for example | |
//localstorageImages(['slide-1','slide-2','slide-3','slide-4'], 1); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment