Скачивание base64-кодированных изображений через JavaScript

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

function быстраяСохранениеBase64(base64Data, filename) {
  const link = document.createElement('a');
  link.href = base64Data;
  link.download = filename;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

быстраяСохранениеBase64('base64ImageData', 'шедевр.png');

Функция быстраяСохранениеBase64 позволяет моментально сохранить изображение, закодированное в base64. Вам нужно указать данные в формате base64 и имя файла. Функция создаёт ссылку, симулирует клик по ней, после чего удаляет ссылку из DOM.

Учим старое: совместимо с старыми браузерами

Не все браузеры поддерживают атрибут download. Для определения поддержки этой функции можно использовать следующий код:

function проверкаПоддержкиСкачивания() {
  const a = document.createElement('a');
  return typeof a.download !== 'undefined';
}

Если атрибут download поддерживается, то функция вернёт true. В противном случае (undefined) изображение откроется в новой вкладке или окне, и его можно будет сохранить вручную.

Уровень ниндзя: скачиваем без создания ссылки

Мы можем обойтись без вмешательства в DOM, применив объект Blob.

function base64ВBlob(base64Data, mimeType) {
  const byteChars = atob(base64Data.split(',')[1]);
  const byteArrays = [];

  for (let offset = 0; offset < byteChars.length; offset += 512) {
    const slice = byteChars.slice(offset, offset + 512);
    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);
  }

  return new Blob(byteArrays, { type: mimeType });
}

function скачатьБлоб(blob, filename) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'случайноеИзображение.png';

  link.click();
  setTimeout(() => URL.revokeObjectURL(url), 100);
}

Этот код позволяет создать объект Blob из данных в формате base64 и скачать его.

Для крупных задач: работаем с большими изображениями

Если перед вами стоит задача работать с большими изображениями, технология Canvas оказалась бы незаменимой. Canvas может преобразовать данные base64 в Blob, что идеально подходит для обработки больших изображений.

function загрузкаИзображенияСКанваса(canvasElement, filename) {
  canvasElement.toBlob((blob) => {
    скачатьБлоб(blob, filename);
  });
}

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

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

В сфере технологий, где сложно разобраться в специфических терминах, я предлагаю простую схему с использованием эмодзи для понимания процесса:

1. Строка в формате  Base64  ——> 💾✂️ (Ctrl+C): "iVBORw0KGgoAAAANSUhEUg..."
2. Путь к ссылке или инструмент для загрузки ——> 📋🔗
3. Трансформация посредством клика ——>  🖱️🔁
4. В итоге, ваше изображение  сохранено в папке загрузок ——> 🖼️📁

Таким образом процесс сохранения Base64-изображения выглядит просто и понятно.

Mulchnye-утилиты c помощью npm

Пакет FileSaver для npm – это удобный инструмент, облегчающий процесс сохранения файлов:

import { saveAs } from 'file-saver';

function скачатьBase64КакФайл(base64Data, filename) {
  const blob = base64ВBlob(base64Data, 'image/png');
  
  saveAs(blob, filename);
}

Используйте saveAs для упрощения процедуры сохранения файлов, что делает код более читаемым.

Следим за деталями: важны MIME-типы

Выбирайте MIME-типы осознанно, это повлияет на сохранение характеристик изображения:

data:[<MIME-type>];base64,<data>

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

1. Использование файлов из веб-приложений – Web APIs | MDN — Детальное руководство по работе с файлами в веб.
2. How to convert ArrayBuffer to and from String | Stack Overflow — о том, как конвертировать ArrayBuffer в строку и обратно.
3. Чтение файлов в JavaScript – web.dev — Как читать файлы в JavaScript.
4. Data URIs – CSS-Tricks — Статья о кодировании изображений в base64 и Data URIs.
5. HTML атрибут download – W3Schools — Примеры использования атрибута download.
6. Base64 Image Encoder — Тренируйтесь в кодировании и декодировании изображений в base64.
7. js-base64 – GitHub — Библиотека для кодирования/декодирования в base64.