Получение данных изображения в base64 с помощью JS

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

Для преобразования изображения в Data URL на JavaScript, вы можете использовать Canvas API с методом toDataURL():

function toDataUrl(src, callback) {
    let img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        ctx.drawImage(img, 0, 0);
        callback(canvas.toDataURL());
    };
    img.src = src;
}

// Пример использования:
toDataUrl('image.jpg', dataUrl => console.log(dataUrl));

Обязательно учтите ограничения на кросс-доменные запросы (CORS), работая с изображениями из других доменов.

Разбираем код

Форматы изображений: выбор MIME-типа

При преобразовании в Data URL следует учесть исходный формат изображения. Метод toDataURL() возвращает PNG по умолчанию, но вы можете указать любой другой формат:

callback(canvas.toDataURL('image/jpeg')); // для получения изображения в формате JPEG

Будьте особенно осторожны с JPEG при использовании старых версий Firefox.

CORS: контроль над загрузкой изображений

Свойство crossOrigin определяет правила загрузки изображений из других источников:

img.crossOrigin = "anonymous"; // позволяет загрузить изображение, сохраняя анонимность

Проверьте, что загружаемые ресурсы поддерживают CORS.

Совместимость с пользовательскими скриптами

Для пользовательских скриптов, таких как Greasemonkey, могут потребоваться дополнительные настройки для работы с Canvas.

Приватность: защита данных на холсте

Фингерпринтинг или отпечатки Canvas могут использоваться для отслеживания пользователей. Обязательно соблюдайте конфиденциальность данных на HTML-холсте.

Загрузка изображений через Fetch API

Вы можете использовать Fetch API для загрузки изображения и его преобразования в Data URL:

fetch('image.jpg').then(response => response.blob()).then(blob => {
    let reader = new FileReader();
    reader.onload = function() {
        console.log(reader.result); // Data URL изображения доступен
    };
    reader.readAsDataURL(blob);
});

Расширение HTMLImageElement с toDataURL

Вы можете добавить метод toDataURL к прототипу HTMLImageElement:

Object.defineProperty(HTMLImageElement.prototype, 'toDataURL', {
    value: function(callback) {
        toDataUrl(this.src, callback);
    }
});

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

Преобразовав изображение в Data URL, вы как бы переводите готовый ужин обратно в рецепт:

Готовый ужин 🍝 ➡️ 📝 Рецепт (Data URL)

Data URL служит для кодирования ужина в формат, позволяющий его в дальнейшем воспроизвести:

let secretRecipe = `data:image/png;base64,iVBORw0KGgo...End`;

Практические советы

Вот несколько напоминаний для работы с изображениями:

1. Загрузка: Дожидайтесь события onload, прежде чем помещать изображение на холст.

2. Префикс Data URL: Чтобы получить чистую строку base64, отделите основную часть кодировки от префикса:

   JS

   Скопировать код

   let base64 = dataUrl.split(',')[1];

3. Смена формата: Помните, что при конвертации в другой формат, например, в "image/jpg", изображение может немного измениться.

Полезные материалы