Есть код, который берет изображение, кодирует в base64, потом отправляет в local storage, дальше достает. Но не получается именно достать из local storage и вывести в dom. Например, есть изображение с классом
class="image", с ним происходят все эти действия (перекодировка и отправка в хранилище), нужно теперь пробежаться по хранилищу, если там есть картинки, то вывести в dom (например в class="imageActive" ), как сделать?
<img id="bannerImg" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg" />
<img id="tableBanner" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Richard_of_Shrewsbury%2C_1._Duke_of_York.jpg?download" />
var images = document.querySelectorAll('.image');
if (images.length > 0) {
// в Storage
var dataArray = [];
for (var i = 0, itemsLength = images.length; i < itemsLength; i++) {
dataArray.push({
img: getBase64Image(images[i]),
id: images[i].id || ''
});
}
localStorage.setItem("imagesData", JSON.stringify(dataArray));
//из Storage
var storageArray = JSON.parse(localStorage.getItem('imagesData'));
if (Array.isArray(storageArray)) {
storageArray.map(function (dataImage) {
var element = document.getElementById(dataImage.id);
if (element) {
element.src = "data:image/png;base64," + dataImage.img;
}
});
}
}
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,/, "");
}
Есть полная версия на фидле:
jsfiddle.net/zolotnitskiy/4ra8nhk4/4 
