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

Base64 — это способ кодирования бинарных данных (например, PNG-картинки) в текст из 64 символов (A-Z, a-z, 0-9, +, /). Используется, когда нужно передать изображение через текстовый протокол (JSON, HTML, email). PNG — формат сжатия без потерь, поддерживает прозрачность. Преобразование нужно, чтобы:

• отобразить картинку на веб-странице без отдельного файла;
• скачать её на устройство;
• обработать в canvas (поворот, ресайз).

В основе лежит обратное преобразование: каждый символ текста base64 даёт 6 бит, которые собираются в байты PNG-файла.

Пример преобразует base64-строку в PNG и показывает в , а также позволяет скачать.

function base64ToPNG(base64, filename = 'image.png') {
  const byteChars = atob(base64);
  const byteNums = new Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteNums[i] = byteChars.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNums);
  const blob = new Blob([byteArray], { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  // показать в img
  const img = document.getElementById('output');
  img.src = url;
  // скачать
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  // освободить память
  URL.revokeObjectURL(url);
}

Серверный код на Node.js получает base64 из API и сохраняет PNG на диск.

const fs = require('fs');

function saveBase64AsPNG(base64String, outputPath) {
  // Удаляем заголовок data:image/png;base64, если есть
  const cleaned = base64String.replace(/^data:image\/\w+;base64,/, '');
  const buffer = Buffer.from(cleaned, 'base64');
  fs.writeFileSync(outputPath, buffer);
  console.log('PNG saved:', outputPath);
}

// Пример использования
saveBase64AsPNG('iVBORw0KGgoAAAANSUhEUg...', 'output.png');

• Неверная длина строки: base64 без паддинга — добавьте '=' до кратности 4. Используйте base64.padEnd(Math.ceil(base64.length/4)*4, '=').
• Битый PNG: проверьте первые 4 байта декодированного бинарника — должны быть 0x89 0x50 0x4E 0x47. Если нет — вход не PNG.
• Огромные строки ( >2 МБ): в браузере atob может выдать ошибку. Используйте fetch('data:image/png;base64,' + bigString).then(r => r.blob()).
• Пробелы в строке: обрежьте .trim() и удалите символы новой строки .replace(/\s/g, '').

Если нужно единоразово перевести base64 в PNG — проще использовать готовый инструмент. Наш Конвертер Base64 в PNG за секунду превращает строку в готовое для скачивания изображение. Также пригодятся Конвертер PNG в Base64 для обратной задачи, Конвертер JPG в Base64 и Base64 в PDF для других форматов.