Konwerter Base64 na PNG

Skąd się biorą obrazy PNG w Base64

PNG to format, który najczęściej występuje w postaci Base64. Wywołanie canvas.toDataURL() bez argumentów zwraca data URI z obrazem PNG. Narzędzia do automatyzacji przeglądarki zwracają zrzuty ekranu jako PNG w Base64, na przykład page.screenshot({ encoding: 'base64' }) w Puppeteerze lub get_screenshot_as_base64() w Selenium. Mechanizmy renderujące wykresy, generatory kodów QR i interfejsy API do generowania obrazów często zwracają grafikę jako pole Base64 w JSON.

Ciąg PNG łatwo rozpoznać: zawsze zaczyna się od iVBORw0KGgo, czyli zakodowanej 8-bajtowej sygnatury PNG, która rozpoczyna się od 89 50 4E 47. Dalej następuje AAAANSUhEUg, czyli początek fragmentu IHDR przechowującego szerokość i wysokość.

Ciągi skopiowane z JSON warto najpierw szybko sprawdzić. Na przykład funkcja json_encode w PHP domyślnie poprzedza ukośniki znakiem ucieczki, więc obraz PNG z API napisanego w PHP może zawierać sekwencje \/. Przed wklejeniem zastąp je znakiem / i usuń otaczające cudzysłowy.

Dlaczego warto zapisać obraz jako PNG

PNG kompresuje dane bez utraty jakichkolwiek szczegółów i przechowuje pełny kanał alfa, więc miękkie cienie i wygładzone krawędzie pozostają nienaruszone. Dlatego jest naturalnym wyborem dla zrzutów ekranu, elementów interfejsu, diagramów i wszystkiego, co zawiera tekst. W przypadku zdjęć JPG lub WebP dają znacznie mniejsze pliki.

Konwersja JPEG lub WebP na PNG zachowuje dokładnie to, co widać na ekranie, ale nie przywróci szczegółów usuniętych już przez kompresję stratną, a plik PNG jest zwykle większy niż plik źródłowy.

Zapis obrazu PNG z Base64 w kodzie

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

// Przeglądarka: data URI na Blob, bez ręcznego dekodowania
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);

Potrzebny jest odwrotny kierunek? Narzędzie PNG na Base64 koduje plik do ciągu lub data URI.