Конвертирование DataUrl в Blob в JavaScript

Конвертирование DataUrl в Blob в JavaScript

Конвертирование DataUrl в Blob в JavaScript

В этой статье мы рассмотрим, как можно преобразовать строку Data URL в объект Blob с использованием JavaScript. Data URL используется для кодирования файлов и других данных прямо в строку, часто в формате Base64. Однако для дальнейшей обработки, особенно для загрузки файлов, нужно преобразовать эту строку обратно в бинарные данные, что и позволяет сделать функция dataURLToBlob.

Функция dataURLToBlob: пошаговый разбор

function dataURLToBlob(dataURL, filename) {

    // Разделяем строку dataURL на две части: тип содержимого (MIME) и данные в base64

    const parts = dataURL.split(',');

    const mimeType = parts[0].match(/:(.*?);/)[1];  // Извлекаем MIME-тип из первой части строки

    const base64Data = parts[1];  // Вторая часть — это закодированные в base64 данные



    // Декодируем строку base64 в двоичные данные

    const byteString = atob(base64Data);  // atob() декодирует base64 в исходные бинарные данные

    const byteArray = new Uint8Array(byteString.length);  // Создаем массив 8-битных целых чисел для хранения данных



    // Проходим по каждому символу декодированной строки и преобразуем его в числовое значение (байт)

    for (let i = 0; i < byteString.length; i++) {

        byteArray[i] = byteString.charCodeAt(i);  // Преобразуем каждый символ в код ASCII

    }



    // Создаем и возвращаем объект Blob (или File для лучшей совместимости с файловыми API)

    return new File([byteArray], filename, { type: mimeType });

}

Подробное объяснение:

  1. Разделение Data URL на компоненты:
    const parts = dataURL.split(',');

       const mimeType = parts[0].match(/:(.*?);/)[1];

       const base64Data = parts[1];

    Data URL состоит из двух основных частей:
  2. MIME-тип (например, image/png), который указывает, что за тип данных содержится в строке.
  3. Данные в формате base64, которые представляют собой закодированные бинарные данные.

С помощью метода split(',') мы разделяем строку на две части: первая содержит информацию о MIME-типе, вторая — собственно данные.

Пример строки Data URL:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Извлекаем MIME-тип с помощью регулярного выражения:
const mimeType = parts[0].match(/:(.*?);/)[1];

  1. Декодирование base64 данных:
    const byteString = atob(base64Data);
    Метод atob() декодирует строку base64 обратно в двоичную строку. Base64 — это способ представления бинарных данных в текстовом формате, что удобно для передачи через текстовые протоколы, такие как HTML или JSON.

После декодирования byteString содержит исходные двоичные данные, но в виде строки.

  1. Создание массива байтов:
    const byteArray = new Uint8Array(byteString.length);
    Мы создаём TypedArray Uint8Array, который позволяет хранить данные в виде массива 8-битных (однобайтовых) целых чисел. Это необходимо для того, чтобы Blob смог корректно обрабатывать бинарные данные.

  2. Заполнение массива двоичными данными:
    for (let i = 0; i < byteString.length; i++) {

           byteArray[i] = byteString.charCodeAt(i);

       }

    Мы проходим по каждому символу декодированной строки и используем метод charCodeAt(), чтобы получить числовое значение (ASCII-код) для каждого символа. Это значение помещается в соответствующую ячейку массива Uint8Array.

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

  1. Создание объекта Blob:
    return new File([byteArray], filename, { type: mimeType });
    В завершение мы создаём объект File (наследник Blob) с помощью конструктора File(). Мы передаем массив байтов, имя файла, и MIME-тип.

Использование File() вместо Blob() удобно, когда требуется работать с API, которые ожидают объект типа файла, например, при загрузке файлов через формы.

Пример использования:

Предположим, у вас есть изображение в формате base64, и вы хотите превратить его в файл для последующей загрузки:

const dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...';

const filename = 'image.png';

const file = dataURLToBlob(dataURL, filename);



// Теперь можно использовать этот объект File для загрузки

console.log(file);  // Выводит объект File, который можно отправить на сервер

Преимущества использования Blob и File

  • Обработка файлов на клиенте: JavaScript позволяет работать с файлами прямо на стороне клиента без необходимости отправлять их на сервер.
  • Создание и управление файлами: С помощью Blob можно динамически генерировать файлы, которые пользователь может скачать или загрузить на сервер.
  • Совместимость с File API: Объекты File и Blob легко интегрируются с API браузеров, позволяя работать с файлами в формах, запросах или сохранять данные локально.
  • Функция dataURLToBlob является мощным инструментом для преобразования данных, закодированных в формате Data URL, в бинарные объекты Blob или File. Она пригодиться при работе с файлами в веб-приложениях, где нужно загрузить или сохранить данные, такие как изображения, документы или другие файлы.

    Еще более продвинутые возможности языка JavaScript обсуждаются в моем видеокурсе Программирование на JavaScript с Нуля до Гуру 2.0.

    Источник

    НЕТ КОММЕНТАРИЕВ

    Оставить комментарий