Перевод base64 в изображение: таблицы, формулы и онлайн-конвертер

Изображение в base64 передается как data:URI:

data:[<mime>][;base64],<data>

Пример: data:image/png;base64,iVBORw0KGgoAAA.... Чтобы получить бинарные данные, нужно:

• Отделить префикс до запятой.
• Извлечь MIME-тип (всё между : и ;).
• Декодировать строку base64 после запятой.

Таблица MIME-типов для популярных форматов:

Если MIME-тип неверен — браузер не отобразит картинку, а сервер может сохранить битый файл.

Наивное решение через atob() и присвоение blob ломается на кириллице и при больших размерах. Вот рабочий код:

function base64ToBlob(base64, mime = 'image/png') {
  const byteChars = atob(base64.split(',')[1] || base64);
  const byteNumbers = new Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteNumbers[i] = byteChars.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], {type: mime});
}

Создание ссылки для скачивания:

const blob = base64ToBlob('iVBOR...', 'image/png');
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'image.png';
a.click();
URL.revokeObjectURL(url);

Edge-case: некоторые base64-строки содержат переводы строк (Base64 с MIME). Удалите их: base64.replace(/\s/g, '').

В Node.js декодирование одной строкой:

const base64 = 'iVBOR...';
const buffer = Buffer.from(base64, 'base64');
fs.writeFileSync('image.png', buffer);

Если base64 содержит data:image/png;base64,, отрежьте префикс:

const prefix = 'data:image/png;base64,';
const raw = base64.startsWith(prefix) ? base64.slice(prefix.length) : base64;
const buffer = Buffer.from(raw, 'base64');

Подводный камень: Buffer.from игнорирует некорректные символы в base64. Валидируйте через base64-js или проверяйте регуляркой /^[A-Za-z0-9+/]+={0,2}$/.

Python требует правильного padding (знак =). Если строка не кратна 4, добавьте символы:

import base64

raw = 'iVBOR...'
# Дополняем padding
missing_padding = len(raw) % 4
if missing_padding:
    raw += '=' * (4 - missing_padding)

data = base64.b64decode(raw)
with open('image.png', 'wb') as f:
    f.write(data)

В Python 3.10+ можно использовать base64.b64decode(raw, validate=True), чтобы ловить ошибки. Таблица частых ошибок:

Чтобы не писать код каждый раз, используйте готовый инструмент: Конвертер Base64 в изображение. Он:

• Принимает как data:URI, так и чистую base64.
• Автоматически определяет MIME-тип.
• Позволяет скачать готовый файл.

Если ваша задача — обратное преобразование (картинка → base64), подойдет Конвертер JPG в Base64. Для работы с PDF есть Base64 в PDF и PDF в Base64.

• SVG — base64 для SVG содержит MIME image/svg+xml. При декодировании получится текст XML. Убедитесь, что не потеряли кодировку UTF-8.
• Прозрачность — PNG с альфа-каналом не теряется при base64. Но JPEG не поддерживает прозрачность; если base64 начинается на /9j/ (JPEG), прозрачности нет.
• Большие файлы — строка base64 в 1.5 раза длиннее оригинала. Для файлов > 50 МБ используйте потоковое декодирование (например, Blob.stream() в браузере).

Подсказка: проверьте первые байты декодированного файла — сигнатуру. Для PNG это 89 50 4E 47 0D 0A 1A 0A, для JPEG — FF D8 FF.

«Base64 неправильно преобразовался — картинка битая» — первым делом проверьте MIME-тип и padding.

Чеклист отладки:

1. Проверьте, что строка base64 начинается с правильного префикса data:URI или без него.
2. Убедитесь, что длина строки кратна 4 (добавьте '=' если нет).
3. Удалите все пробелы и переводы строк: str.replace(/\s/g, '').
4. Принудительно задайте MIME-тип на основе сигнатуры, если заголовок потерян.
5. В браузере используйте console.log(new Blob([...]).size) для проверки размера Blob.