Как засунуть несколько изображений в local storage?

Question

[Kusmich]

Есть код, который закидывает одно изображение в local storage c id="bannerImg", потом достаёт из хранилища и засовывает в тег <img> c id="tableBanner". Но не получается сделать, чтобы можно было несколько изображений положить в хранилище, потом взять эти изображения и вставить их в тег <img> c class="tableBanner".

То есть проблема в том, что не получается обработать несколько изображений сразу. Например, взять 2 тега img с классом class="bannerImg", их нужно положить в storage, и доставая, вставить в тег img с классом tableBanner.

Сейчас в моем коде (для одного изображения) переменная bannerImage принимает изображения для дальнейшей обработки (перекодировка в base64, и запись в local storange), но кода пробую для нескольких (например 2 изображения вместо id обращаюсь по классу или по имени тега), то работать не хочет. Например bannerImage = document.getElementsByClassName('bannerImg1') - работать не хочет.

Как решить проблему?

Ниже представляю код для одного изображения:

<img class="tableBanner1" id="bannerImg" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg" />
<img class="tableBanner1" id="tableBanner" crossOrigin="*" src="" />


 bannerImage = document.getElementById('bannerImg');
 imgData = getBase64Image(bannerImage);
 localStorage.setItem("imgData", imgData);

 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,/, "");
 }
 var dataImage = localStorage.getItem('imgData');
 bannerImg = document.getElementById('tableBanner');
 bannerImg.src = "data:image/png;base64," + dataImage;

Вот на фидле: jsfiddle.net/4ra8nhk4/14

Answer 1

[Pavel]

Надеюсь Вы понимаете что document.getElementsByClassName возвращает HTMLCollection а не array и тем более не элемент

Comments

[Kusmich]

Это было для примера . Но с массивом тоже не получается....

[Pavel]

jsfiddle.net/4ra8nhk4/25

[Kusmich]

Спасибо большое