Как закодировать изображения в base64 через методы btoa и atob?

Question

[Дарья]

Никак не могу понять, как закодировать и раскодировать разные изображения для записи и последующем извлечении их из LocalStorage в html.

Есть написанный код простого приложения для добавления книг через форму, данные которых хранятся в LS.
https://codepen.io/daria-v1985/pen/rNRwrZq

Вся логика хранения и вывода данных уже написана, осталось только разобраться с тем, как в созданную базу dataBook добавлять зашифрованный в base64 адрес картинки, а потом декодировать обратно и вывести в карточку с инфой.

Выглядит это так:
- форма для ввода данных с превью изображения


- вывод карточки с инфой о книге (там где желтый прямоугольник должно быть изображение)


Как это можно сделать с помощью методов btoa и atob?

Comments

[VoidVolker]

Дарья и что же именно у вас не получается?

[Дарья]

VoidVolker, никак не могу понять, как закодировать и раскодировать разные изображения для записи и последующем извлечении их из LocalStorage в html через методы работы с шифрованием btoa и atob.

[Антон Горецкий]

а вы в курсе, что LocalStorage не предназначен для хранения картинок? Тем более их размер возрастает при перекодировании в строку. Примерно 5-10мб на домен предел.

[Дарья]

Антон Горецкий, возможно, но это тестовый проект. Мне он нужен для понимания
Тем более, что у меня стоит проверка на размер не более 2 Мб

[Lynn «Кофеман»]

А зачем btoa?

У вас уже есть готовый readAsDataURL

[Дарья]

Lynn «Кофеман», данный readAsDataURL выводит превью изображения при его выборе в самой форме. А мне необходимо изображение отдельно добавить в карточку о книге после отработки функции отправки формы при записи и перезаписи данных из LS через функцию renderTask.

[Lynn «Кофеман»]

Дарья, а что мешает сохранить эту же строчку в LS?

Answer 1

[Антон Горецкий]

Тут вам не нужны методы btoa и atob. В вашем коде есть место где можно получить base64 вашего изображения:

const reader = new FileReader();

  reader.onload = (e) => {
    formPreview.innerHTML = `<img src="${e.target.result}" alt="Обложка книги">`
// 
    const base64String = reader.result;
    console.log(base64String); // Вывод base64-строки, можно сохранить ее в LS
  };
  reader.onerror = (e) => alert('Ошибка!');
  reader.readAsDataURL(file);
}

А обратно кодировать ее в бинарный формат не нужно. Если присвоить атрибуту src изображения эту строку (base64String) - то картинка отобразится в html-документе

imgPreview.src = base64String;     // показываем изображение, imgPreview - id тега с img