Base64 в картинку

Как перевести Base64 в картинку

1. Вставьте строку в поле. Длинное значение, сохранённое в файле, можно открыть кнопкой Открыть файл .txt или перетащить файл в поле.
2. Если включено На лету, картинка декодируется сразу при вставке. Строка статуса показывает, корректен ли Base64, его вариант (стандартный или Base64URL), число байтов и формат в поле Определено.
3. Проверьте превью. Под ним видны тип, MIME-тип, расширение, размер в байтах, размеры в пикселях и хеш SHA-256.
4. При желании поправьте Имя файла и нажмите Скачать файл. Скопировать как data URI вместо этого даёт чистый URI data: для HTML или CSS.

Кнопка Пример загружает небольшой PNG, чтобы вы увидели, как выглядит результат, ещё до вставки своих данных.

Что можно вставлять

Декодер понимает Base64 в разной обёртке, потому что строки с картинками редко приходят чистыми:

• Чистый Base64, как его возвращает API: iVBORw0KGgoAAAANSUhEUg...
• Data URI: data:image/png;base64,iVBORw0KGgo...
• Код, в котором есть data URI: background-image: url("data:image/svg+xml;base64,..."), <img src="data:image/jpeg;base64,...">, картинка в Markdown ![](data:...) или JSON-поле, значение которого – data URI. Первый data URI извлекается автоматически.
• Base64 с переносами строк из исходников писем или вывода в стиле PEM, с пробелами или переносами через каждые 64 или 76 символов.
• URL-safe Base64 с - и _, строки без дополнения = и значения в кавычках.

Если Base64 лежит в JSON-поле без префикса data:, копируйте только значение между кавычками. Целый JSON-документ отклоняется как некорректный Base64, потому что { не входит в алфавит.

Как определяется формат

Каждый формат изображений начинается с постоянной сигнатуры из так называемых «магических байтов». Инструмент декодирует строку и сравнивает первые байты с этими сигнатурами, поэтому строка с меткой image/png, в которой на самом деле JPEG, распознаётся как JPEG. Те же сигнатуры видны и в самом Base64, что помогает при чтении логов и дампов баз данных:

Распознаются также AVIF, JPEG XL и файлы курсоров (.cur). Если data URI объявляет один тип, а содержимое говорит о другом, подсказка покажет оба. Если данные вообще не картинка, например PDF, страница скажет об этом и предложит кнопку Скачать как .pdf. На странице распространённые префиксы Base64 перечислены сигнатуры многих других типов файлов.

Почему картинка не показывается

Строку обрезали. Значения Base64 обрезают лимиты длины строки в логах, размеры столбцов в базах данных, ячейки таблиц (32 767 символов) и копирование из терминала. Тогда JPEG или PNG отрисовывается только частично, или превью не работает вовсе. Если из-за одного лишнего или недостающего символа длина становится невозможной, вы получите ошибку «Неверная длина». Корректная, но короткая строка декодируется без ошибки, так что сравните Размер с ожидаемым.

В data URI неверный MIME-тип. data:image/png перед байтами JPEG в браузерах обычно всё равно отображается, потому что растровые форматы они определяют по содержимому, а другие программы верят метке. SVG по содержимому не определяется никогда: с любым типом, кроме image/svg+xml, он не отрисуется в <img>. Для превью и скачивания инструмент использует настоящий формат.

Символы изменились по дороге. +, прошедший через кодирование форм, часто возвращается пробелом. Если в однострочной строке есть пробелы и нет ни одного +, декодер превращает пробелы обратно в +; если встречается и то, и другое, различить их нельзя, и картинка может декодироваться в неверные байты. JSON от некоторых библиотек экранирует слеши как \/; декодер сам убирает такое экранирование и буквальные последовательности \n. Для более запутанных случаев есть починка Base64, она перечисляет каждое исправление.

Данные закодированы дважды. Если декодированные байты сами оказываются текстом Base64, подсказка скажет об этом, а Декодировать ещё раз снимет следующий слой. Назад возвращает к предыдущему шагу. Так же это работает с data URI внутри Base64 и с данными, сжатыми gzip или zlib.

Браузер не умеет показывать этот формат. Фото HEIC с iPhone отображаются только в Safari 17 и новее, TIFF – только в Safari, а JPEG XL требует Safari 17, Chrome 155 или Firefox 158 и новее. Тогда превью сообщит, что браузер не может показать картинку, но байты целы: Скачать файл сохранит рабочий файл, который откроет приложение для фото.

Это не картинка. Строка Base64, которая начинается с JVBER, содержит PDF, а с UEsDB – архив ZIP. Используйте Base64 в файл: он показывает превью документов, архивов, аудио и не только.

Как сохранить с правильным расширением

Поля Расширение и MIME-тип заполняются по найденному формату, пока вы их не отредактируете, так что PNG сохранится как .png, даже если во вводе слово «PNG» не встречалось. Это важно в Windows и для форм загрузки, которые судят о файле по расширению. Если переименовать WebP в .jpg, внутри он останется WebP, и строгие программы его отвергнут. Переименование никогда не конвертирует формат.

Оба поля можно переопределить, например чтобы сохранить иконку как .cur или указать свой MIME-тип. Изменённый MIME-тип заодно перерисовывает превью для этого типа.

SHA-256 и hex-дамп

Хеш SHA-256 под превью считается по декодированным байтам. Сравните его с хешем от отправителя, из записи в базе данных или с результатом sha256sum image.png, чтобы доказать, что сохранённая картинка – тот самый закодированный файл, байт в байт. Для хеширования других данных есть инструмент SHA-256.

Показать hex-дамп выводит первые 512 байт. Это самый быстрый способ изучить заголовок: ширину и высоту PNG по смещению 0x10, маркер Exif в JPEG с камеры или каталог изображений в файле ICO.

Конфиденциальность: картинки остаются на вашем устройстве

В Base64 часто приходят картинки, которые не хочется загружать на случайный сайт: скриншоты из баг-репорта, сканы паспорта или удостоверения, медицинские снимки из личного кабинета пациента, подписи с планшета. Здесь декодирование целиком идёт в браузере. Политика безопасности контента страницы блокирует сетевые запросы её скриптов, кроме счётчика просмотров Cloudflare, а Скачать файл сохраняет файл из локального URL blob:. Сайт не хранит ничего из того, что вы вставляете.

Как декодировать картинку из Base64 в коде

В Python уберите префикс, восстановите дополнение и выберите расширение по сигнатуре:

import base64, re

def save_image(b64: str, stem: str = "image") -> str:
    b64 = re.sub(r"^data:[^,]*;base64,", "", b64.strip(), flags=re.I)
    b64 = re.sub(r"\s+", "", b64).replace("-", "+").replace("_", "/")
    data = base64.b64decode(b64 + "=" * (-len(b64) % 4))
    if data.startswith(b"\x89PNG"):
        ext = "png"
    elif data.startswith(b"\xff\xd8\xff"):
        ext = "jpg"
    elif data.startswith(b"GIF8"):
        ext = "gif"
    elif data[:4] == b"RIFF" and data[8:12] == b"WEBP":
        ext = "webp"
    else:
        ext = "bin"
    with open(f"{stem}.{ext}", "wb") as f:
        f.write(data)
    return f"{stem}.{ext}"

В браузере превратите строку в Blob и покажите её через object URL:

function base64ToBlob(b64, type = "image/png") {
  const bin = atob(b64.replace(/^data:[^,]*;base64,/, "").replace(/\s+/g, ""));
  const bytes = Uint8Array.from(bin, c => c.charCodeAt(0));
  return new Blob([bytes], { type });
}

img.src = URL.createObjectURL(base64ToBlob(str));

Чтение и запись двоичных данных подробно разобраны в статьях Base64 в Python и Base64 в JavaScript. Для обратной задачи картинка в Base64 кодирует изображение, умеет менять размер и конвертировать формат.

Вопросы и ответы