Преобразование base64 в Blob в JavaScript: эффективные методы

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

Для преобразования base64-строки в Blob необходимо использовать функцию atob для получения бинарных данных и создать Blob с указанным типом контента. Приведенный ниже код иллюстрирует это:

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

let b64Data = 'base64String'; // Закодированная в base64 рок-н-ролл мелодия
let contentType = 'yourContentType'; // Например, 'image/png'

let byteCharacters = atob(b64Data);
let byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    let slice = byteCharacters.slice(offset, offset + 512);
    byteArrays.push(new Uint8Array([...slice].map(char => char.charCodeAt(0))));
}

let blob = new Blob(byteArrays, {type: contentType});

Обратите внимание, что маленькие порции данных используются для создания массива, что значительно повышает производительность.

Кинга Идем в IT: пошаговый план для смены профессии

Работа с большими данными: советы и трюки

Встречайте мощный fetch API

Для работы с большими base64-строками удобно использовать fetch API. Он возвращает Promise, который выполняется в ответ на запрос.

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

let b64Data = 'yourSuperLargeBase64Data'; // Возможно, это сценарий нового фильма о супергероях
let contentType = 'yourContentType'; // Выберите подходящий тип контента

fetch(`data:${contentType};base64,${b64Data}`)
  .then(res => res.blob())
  .then(blob => {
    // Мир спасен, Blob получен!
  });

Подробнее об этом расскажет наш спикер на видео

Функция b64toBlob для ежедневного спасения мира

Создайте функцию b64toBlob для упрощения повторяющихся операций:

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

function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
    let byteCharacters = atob(b64Data);
    let byteArrays = [];
    
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = slice.split('').map(char => char.charCodeAt(0));
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
  
    return new Blob(byteArrays, {type: contentType});
}

Такой подход повышает эффективность кодирования.

Canvas toBlob

Для работы с большими изображениями рекомендуется использовать canvas.toBlob, так как он быстрее и требует меньше памяти, чем canvas.toDataURL.

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

let canvas = document.createElement('canvas');
// Ваши мечты о создании картины на виртуальном холсте становятся реальностью

canvas.toBlob(blob => {
    // И вот ваше первое цифровое полотно готово к использованию
}, 'image/png');

Когда речь идёт не только о base64: дополнительные нюансы и соображения

FormData — ваш надежный помощник

Для загрузки файлов рекомендуется использовать FormData. Он позволяет отправлять файлы без преобразования их в base64:

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

let formData = new FormData();
formData.append('file', blob, 'filename');

Теперь вы обрабатываете файлы как настоящий профессионал!

Blob URL: создание и уничтожение

Не забывайте отзывать Blob URL командой URL.revokeObjectURL() после их использования.

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

let blobUrl = URL.createObjectURL(blob);

let downloadLink = document.createElement('a');
downloadLink.href = blobUrl;
downloadLink.download = 'filename';

document.body.appendChild(downloadLink);
downloadLink.click();

document.body.removeChild(downloadLink);
URL.revokeObjectURL(blobUrl);

Такое поведение способствует оптимальному использованию памяти.

Избегание блокировки интерфейса

Для обработки больших данных без блокировки интерфейса используйте Web Workers или Async/Await. Это обеспечивает отзывчивое поведение UI.

Оптимизация кода для надежности и эффективности

Важность типа содержимого

Всегда указывайте правильный MIME-тип при создании Blob:

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

let blob = new Blob([myData], {type: 'data/toTheMoon'});

Совместимость с браузерами

Обеспечьте совместимость вашего кода с различными браузерами, особенно когда используете API fetch и возможности Blob.

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

Представьте base64-строку как головоломку. После декодировки вы получаете набор байтов и завершаете процесс созданием объекта Blob:

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

let byteCharacters = atob("YmFzZTY0IGRhdGE=");
let byteArrays = [];
for(let i = 0; i < byteCharacters.length; i++) {
    byteArrays.push(byteCharacters.charCodeAt(i));
}
let blob = new Blob([new Uint8Array(byteArrays)], {type: 'application/octet-stream'});

Markdown

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

Blob: 🗿 (Результат ваших усилий)

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

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Что необходимо использовать для преобразования base64-строки в Blob в JavaScript?

1 / 5

Свежие материалы

Лучшие каналы для изучения JavaScript

6 сентября 2024

Как выбрать версию Swift для скачивания

6 сентября 2024

Каналы на русском языке

6 сентября 2024