Base64 в PNG

Как перевести Base64 в PNG

1. Вставьте Base64 или полный URI data:image/png;base64,... в поле. Вместо этого можно открыть или перетащить файл .txt со строкой.
2. Проверьте строку статуса: там должно быть Корректный Base64 и Определено: PNG. Превью показывает изображение и его размер в пикселях.
3. При необходимости поменяйте Имя файла. В поле Расширение уже стоит png.
4. Нажмите Скачать файл.

Если окажется, что данные в другом формате, над превью появится подсказка, например «Похоже на JPEG, а не на PNG», с кнопкой Скачать как .jpg. Обычно лучше сохранить файл с настоящим расширением, потому что переименование ничего не конвертирует.

Откуда берётся PNG в Base64

PNG – формат по умолчанию у многих инструментов, которые отдают картинки текстом:

• canvas.toDataURL() в браузерах возвращает data URI с PNG, если не запросить другой тип. На нём построены поля для подписи, приложения для рисования и библиотеки графиков, которые экспортируют изображения.
• Автоматизация браузера. get_screenshot_as_base64() в Selenium и page.screenshot({ encoding: "base64" }) в Puppeteer возвращают скриншоты PNG чистым Base64, без префикса. Отчёты о тестах часто встраивают их в JSON или HTML.
• API для QR-кодов, штрихкодов, капчи, карт и генерации изображений обычно возвращают PNG в поле JSON.
• HTML и CSS со встроенными иконками, а также однофайловые экспорты отчётов и блокнотов.

Всё это вставляется как есть. Переносы строк, отсутствующий = в конце и URL-safe символы допускаются; строка статуса сообщит, если пришлось добавить дополнение.

Как читать заголовок PNG

PNG начинается с 8-байтовой сигнатуры, за которой идёт чанк IHDR с основными свойствами изображения. Нажмите Показать hex-дамп, чтобы их увидеть. Для изображения 120×40 с прозрачностью первые две строки такие:

00000000  89 50 4e 47 0d 0a 1a 0a  00 00 00 0d 49 48 44 52  |.PNG........IHDR|
00000010  00 00 00 78 00 00 00 28  08 06 00 00 00 35 ea 3e  |...x...(.....5.>|

Тип цвета говорит, что у вас за PNG: 00 – оттенки серого, 02 – RGB, 03 – палитра (индексированные цвета), 04 – оттенки серого с альфой, 06 – RGB с альфой. PNG с палитрой после оптимизатора часто намного меньше RGBA, и это пригодится, когда Base64 должен быть коротким.

Если размеры выглядят абсурдно, например ширина в несколько миллионов пикселей, байты после сигнатуры повреждены, и превью не сработает.

Как проверить PNG в коде

Те же поля заголовка можно прочитать в несколько строк на Python без всяких библиотек для изображений. Разделение по запятой позволяет работать и с чистым Base64, и с data URI:

import base64, struct

def png_info(b64: str) -> dict:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:8] != b"\x89PNG\r\n\x1a\n":
        raise ValueError("not a PNG")
    width, height, depth, color_type = struct.unpack(">IIBB", data[16:26])
    return {"width": width, "height": height, "bit_depth": depth, "color_type": color_type}

Чтобы записать файл в Node.js, достаточно fs.writeFileSync("shot.png", Buffer.from(b64, "base64")). Декодер Base64 в Node пропускает переносы строк и принимает URL-safe символы. Подробности в статьях Base64 в Python и Base64 в Node.js.

Если PNG не декодируется или не показывается

• Ошибка «Недопустимый символ». В строке есть что-то кроме Base64: экранирование JSON вроде \/, HTML-сущность или остаток строки лога. В ошибке указана позиция, а починка Base64 убирает типичных виновников.
• Картинка нарисована частично или не видна. Строку обрезали. Полный PNG заканчивается чанком IEND; если знаете размер исходного файла, сравните его с полем Размер.
• «Не похоже на PNG». Байты вообще не начинаются с сигнатуры PNG. Так бывает с зашифрованными данными, другой кодировкой вроде hex или дважды закодированным Base64; в последнем случае появится кнопка Декодировать ещё раз.
• Превью работает, а другая программа файл не принимает. Сравните SHA-256, показанный здесь, с хешем файла, который получила программа. Если они совпадают, декодированный файл правильный, а проблема в программе.

Обратное преобразование делает PNG в Base64.

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