Создание Blob из строки base64 в JavaScript

Функция atob декодирует строку, закодированную в base64, в новую строку, где каждый символ соответствует байту бинарных данных.

const byteCharacters = atob(b64Data);

Кодовая точка (charCode) каждого символа будет соответствовать значению байта. Мы можем создать массив значений байтов, применяя метод .charCodeAt к каждому символу в строке.

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

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

const byteArray = new Uint8Array(byteNumbers);

Затем его можно конвертировать в Blob, обернув в массив и передав конструктору Blob.

const blob = new Blob([byteArray], {type: contentType});

Приведенный выше код работает. Однако производительность можно немного улучшить, обрабатывая byteCharacters меньшими кусками, а не сразу все. По моим грубым тестам 512 байт будет хорошим размером для среза. Это дает нам следующую функцию.

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
    
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

Затем вызовем эту функцию и создадим URL для нашего Blob:

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

Полный пример:

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
    
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

Этот пример демонстрирует, как преобразовать строку base64 в изображение, которое отображается на веб-странице.

Вот оптимизированная (но менее читаемая) реализация функции для преобразования строки Base64 в объект Blob:

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

Описание

Функция base64toBlob принимает два аргумента: строку base64Data и необязательный параметр contentType, который определяет тип содержимого (например, 'image/png' или 'application/pdf'). Если contentType не указан, будет использоваться пустая строка.

1. Декодирование Base64: Строка Base64 декодируется в байты с помощью функции atob, которая возвращает строку, содержащую байтовые данные.
2. Разделение на срезы: Декодированная строка разделяется на части (срезы) размером sliceSize (1024 байта), чтобы избежать проблем с управлением памятью.
3. Создание массива байтов: Для каждого среза создается массив Uint8Array, представляющий собой подмассив байтов.
4. Возврат Blob: В конце функция возвращает новый объект Blob, который создается из массива байтов и содержит указанный тип содержимого.

Применение

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

Вот ваш код на TypeScript, который можно легко конвертировать в JavaScript:

/**
 * Преобразовать BASE64 в BLOB
 * @param base64Image Передайте данные изображения в формате Base64 для преобразования в BLOB
 */
private convertBase64ToBlob(base64Image: string) {
  // Разделяем строку на две части
  const parts = base64Image.split(';base64,');

  // Получаем тип содержимого
  const imageType = parts[0].split(':')[1];

  // Декодируем строку Base64
  const decodedData = window.atob(parts[1]);

  // Создаем Uint8Array размером так же, как длина данных
  const uInt8Array = new Uint8Array(decodedData.length);

  // Вставляем все символы в uInt8Array
  for (let i = 0; i < decodedData.length; ++i) {
    uInt8Array[i] = decodedData.charCodeAt(i);
  }

  // Возвращаем BLOB-изображение после преобразования
  return new Blob([uInt8Array], { type: imageType });
}

Если вы хотите получить JavaScript-версию, код будет выглядеть следующим образом:

/**
 * Преобразовать BASE64 в BLOB
 * @param base64Image Передайте данные изображения в формате Base64 для преобразования в BLOB
 */
function convertBase64ToBlob(base64Image) {
  // Разделяем строку на две части
  const parts = base64Image.split(';base64,');

  // Получаем тип содержимого
  const imageType = parts[0].split(':')[1];

  // Декодируем строку Base64
  const decodedData = window.atob(parts[1]);

  // Создаем Uint8Array размером так же, как длина данных
  const uInt8Array = new Uint8Array(decodedData.length);

  // Вставляем все символы в uInt8Array
  for (let i = 0; i < decodedData.length; ++i) {
    uInt8Array[i] = decodedData.charCodeAt(i);
  }

  // Возвращаем BLOB-изображение после преобразования
  return new Blob([uInt8Array], { type: imageType });
}

Таким образом, вы можете использовать этот код для преобразования изображения из формата Base64 в BLOB в вашем JavaScript приложении. Если у вас есть дополнительные вопросы, не стесняйтесь задавать!

Для всех любителей копировать и вставлять, вот готовая функция для загрузки файлов, которая работает в Chrome, Firefox и Edge:

window.saveFile = function (bytesBase64, mimeType, fileName) {
    var fileUrl = "data:" + mimeType + ";base64," + bytesBase64;
    fetch(fileUrl)
        .then(response => response.blob())
        .then(blob => {
            var link = window.document.createElement("a");
            link.href = window.URL.createObjectURL(blob, { type: mimeType });
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
}

Эта функция принимает три аргумента: bytesBase64 — строка с данными файла в формате Base64, mimeType — MIME-тип файла, и fileName — желаемое имя для сохранения файла. Она создает временную ссылку для скачивания, кликает по ней и затем удаляет ссылку из документа. Это простой способ скачать файлы прямо из кода!

Для того чтобы преобразовать строку в формате Base64 в объект Blob и отобразить изображение на странице, вы можете использовать следующий код. Этот код работает, превращая данные Base64 в массив байт, а затем создает Blob, который можно использовать для отображения изображения. Вот пример:

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data); // Декодируем строку Base64
  var byteArrays = [];

  // Разбиваем массив байт на части для создания массива Uint8Array
  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);
    var byteNumbers = new Array(slice.length);
    
    // Конвертируем каждый символ в его код
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers); // Создаем Uint8Array из чисел
    byteArrays.push(byteArray);
  }
    
  var blob = new Blob(byteArrays, {type: contentType}); // Создаем Blob из массива байт
  return blob;
}

var contentType = 'image/png'; // Задайте нужный тип контента
var b64Data = 'Ваши данные в формате Base64'; // Вставьте вашу строку Base64

var blob = b64toBlob(b64Data, contentType); // Преобразуем Base64 в Blob
var blobUrl = URL.createObjectURL(blob); // Создаем URL для Blob

// Создаем элемент img и добавляем его в документ
var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

Убедитесь, что вы заменили 'Ваши данные в формате Base64' на вашу строку Base64. Этот код создаст изображение и добавит его на веб-страницу.