Как преобразовать изображение в строку Base64 на JS

Быстрый ответ

Чтобы преобразовать изображение в строку Base64, незаменимым инструментом в JavaScript станет метод readAsDataURL, который предоставляет объект FileReader:

function toBase64(file, onSuccess) {
    let reader = new FileReader();
    reader.onload = () => onSuccess(reader.result);
    reader.readAsDataURL(file);
}

document.querySelector('input[type=file]').onchange = (event) => {
    toBase64(event.target.files[0], console.log); // Вывод консоли покажет преобразованное в Base64 изображение
};

Функция toBase64 осуществляет кодирование и вызывает функцию onSuccess, причём передаёт в неё строку в формате Base64 после выполнения операции.

Обход ограничений кросс-домена

Противостояние с ограничениями кросс-домена? При импорте изображения по URL убедитесь, что оно подается с подходящими заголовками CORS для избегания вопросов безопасности. Для комфортной работы в локальном окружении live-server поможет обойти эти ограничения, обеспечив доступ к файлам изображений.

// Загружаем изображение, аккуратно живописую, как Боб Росс
fetch(url)
  .then(response => response.blob())
  .then(blob => { /* ваш код для преобразования в Base64 здесь */ })
  .catch(error => console.error('Кажется, CORS всё же заблокировал доступ:', error));

Работа с громадными изображениями

Обработка огромных файлов может привести к значительной нагрузке на производительность, словно схватка с голодным медведем. Если у вас нет выбора и необходимо преобразовать такой файл, рекомендуется использовать объекты blob и читать данные потоком для уменьшения затрат памяти. Можно применить FileReader в сочетании с Fetch API, чтобы производительность оставалась на уровне.

async function toBase64(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

Другой совет — сжимайте изображения или изменяйте их размеры перед преобразованием, чтобы уменьшить размер итоговой строки Base64.

Современные подходы в тренде

FileReader, несмотря на широкую поддержку, уже излетел из моды, так как современные браузеры предлагают более удобные API для работы с бинарными данными. Рассмотрите применение fetch в сочетании с методами canvas для более эффективной обработки и сжатия данных:

async function fetchAndConvertToBase64(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    const canvas = document.createElement('canvas');
    const dataURL = canvas.toDataURL();
    return dataURL; // Полученная строка Base64
}

Этот метод хорошо подходит, когда необходимо внести правки в изображение перед его преобразованием (например, обрезать или повернуть).

Обещающие асинхронные паттерны и преодолевание ошибок

Для управления асинхронностью используйте Promises или актуальное async/await. Не забывайте про обработку ошибок, чтобы ваш код был готов к сетевым сбоям, проблемам при доступе к файлам или экстремальным случаям, наподобие попытки пользователей загрузить их огромные презентации.

function toBase64(file) {
    return new Promise((resolve, reject) => {
        if (!file.type.match('image.*')) {
            reject(new Error('Это не то, что вы ищете: не изображение.'));
        }
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
        reader.readAsDataURL(file);
    });
}

Таким образом, ваш код будет подготовлен ко всем трудностям, которые могут возникнуть в непредсказуемом мире Интернета.

Визуализация

Преобразование изображения в строку Base64 в JavaScript можно представить таким образом:

Физическое изображение (🖼️)   --->   🔄 Процесс кодирования --->   Цифровой код (🔢)

Процесс кодирования, реализуемый FileReader, переводит физическое изображение в строку Base64:

const reader = new FileReader();
reader.onloadend = function() {
    console.log(reader.result); // 'data:image/png;base64,ЗАКОДИРОВАННЫЕ_ДАННЫЕ...'
}
reader.readAsDataURL(file); // file — это ваш выбранный файл изображения.

В итоге мы получаем из 🖼️ файла изображения 🔢 строку Base64. Весьма увлекательно!

Кодирование сырых бинарных данных

Возможно, вам потребуется закодировать сырые бинарные данные. В этом случае функция btoa() придёт на помощь для преобразования данных в Base64.

const binaryData = /* здесь некие сырые бинарные данные */
const base64String = btoa(binaryData);
console.log(base64String); // 'SGVsbG8gdGhlcmUh'

btoa() лучше справляется со строками, а для обработки blob-объектов снова пригодится File API.

Помощь библиотек и плагинов

Не желаете усложнять себе жизнь? Воспользуйтесь сторонними библиотеками и плагинами, которые предлагают множество возможностей для работы с изображениями, включая blueimp-load-image и pica. Они возьмут на себя всю сложную работу по изменению размеров, вращению и преобразованию форматов.