Преобразовать изображения JPG и PNG в URL-адреса данных Base64 легко с помощью JavaScript. Сейчас я покажу вам, как это сделать.
Если вы не знали, URL данных — это просто длинная строка символов, которая представляет двоичный формат вашего изображения. Затем вы можете использовать этот URL в тегах HTML <img>.
Очень удобно.
Видеоурок
Если вы предпочитаете видеоинструкцию, вы можете посмотреть это 4-минутное видео на моем канале YouTube:
Шаг 1. Ввод файла
Вам понадобится поле ввода файла в вашем HTML. Вот так:
<input type="file" id="fileInput" />
Вы можете назвать идентификатор так, как вам нравится.
Шаг 2. Событие изменения
В JavaScript вам нужно прикрепить слушатель change, который будет реагировать на выбор пользователем файла.
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", e => {
console.log(e);
});
Если вы выберете файл и посмотрите консоль, вы заметите объект события. Обратите внимание на свойство target.files.
Шаг 3. Настройка программы чтения файлов
Далее вам нужно получить ссылку на выбранный файл и создать новый экземпляр FileReader. Этот объект чтения файлов может читать файлы в различных формах.
fileInput.addEventListener("change", e => {
const file = fileInput.files[0];
const reader = new FileReader();
});
Замените строку console.log приведенным выше кодом.
Шаг 4. Чтение как URL данных
Теперь, когда мы создали FileReader, мы можем указать ему читать файл как Base64 Data URL.
reader.addEventListener("load", () => {
// Base64 Data URL 👇
console.log(reader.result);
});
reader.readAsDataURL(file);
Как вы видите, мы прикрепили событие load к FileReader. После завершения чтения файла мы можем получить URL данных, обратившись к reader.result.
Полный код
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", e => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
// Base64 Data URL 👇
console.log(reader.result);
});
reader.readAsDataURL(file);
});
Готово! Не стесняйтесь использовать этот URL данных в своих тегах <img>. Только не делайте изображения слишком большими 😎
Запишитесь сейчас 👉 JavaScript DOM Crash Course
Если вы изучаете веб-разработку, вы можете найти полный курс по JavaScript DOM по ссылке ниже 👇.
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
