Конвертер Base64 в PNG

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

Чаще всего в виде Base64 встречается именно PNG. Вызов canvas.toDataURL() без аргументов возвращает data URI в формате PNG. Инструменты автоматизации браузера отдают скриншоты в виде PNG в Base64, например page.screenshot({ encoding: 'base64' }) в Puppeteer или get_screenshot_as_base64() в Selenium. Библиотеки построения графиков, генераторы QR-кодов и API для генерации изображений часто возвращают картинку в поле Base64 внутри JSON.

Строку PNG легко узнать: она всегда начинается с iVBORw0KGgo. Это закодированная 8-байтовая сигнатура PNG, которая начинается с 89 50 4E 47. За ней следует AAAANSUhEUg — начало блока IHDR, в котором хранятся ширина и высота.

Строки, скопированные из JSON, сначала стоит быстро проверить. Например, функция PHP json_encode по умолчанию экранирует прямые слеши, поэтому PNG из API на PHP может прийти с последовательностями \/. Замените их на / и уберите окружающие кавычки, прежде чем вставлять строку.

Зачем сохранять в PNG

PNG сжимает изображение без потери деталей и хранит полноценный альфа-канал, поэтому мягкие тени и сглаженные края остаются нетронутыми. Это делает его естественным выбором для скриншотов, элементов интерфейса, диаграмм и всего, что содержит текст. Для фотографий JPG или WebP дают гораздо меньшие файлы.

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

Сохранение PNG из Base64 в коде

# Python
import base64
with open('screenshot.png', 'wb') as f:
    f.write(base64.b64decode(b64_string))

// Браузер: data URI в Blob без ручного декодирования
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);

Нужно обратное преобразование? Инструмент PNG в Base64 кодирует файл в строку или data URI.