<input type="file" />? Завантаженням зображень на веб-сторінках сьогодні нікого не здивуєш. А як показати зображення, ще до того, як воно було оброблене? Адже в нас є тільки файл, а не src у текстовому форматі. Логічно виходить, що нам потрібно перетворити даний файл у текст.
Перший спосіб -
URL.createObjectURL.
// Дістанемо файл, наприклад отак:
const file = event.target.files[0]
const url = URL.createObjectURL(file)
// Додамо цей url в src-атрибут для img
img.src = url
Після цього - не забудьте звільнити цей
URL за допомогою URL.revokeObjectURL().Інший спосіб - використати
FileReader. Знайти приклади з ним - ваше домашнє завдання 🤓. Лише додамо, що якщо вам потрібно зробити щось таке у service worker - цей метод спрацює, на відміну від першого.👉 Відкрити документацію URL.createObjectURL
👉 Відкрити документацію FileReader.readAsDataURL
Ну і звісно не без приколів. Стандартний формат зображень на iPhone -
HEIF/HEIC, який поки не підтримується більшістю браузерів. Тому, якщо вам необхідно підтримувати і цей формат, зверніть увагу на бібліотеку heic2any.👉 Відкрити документацію heic2any
#interview