Base64-naar-PNG-converter

Waar Base64-PNG's vandaan komen

PNG is het formaat dat je het vaakst als Base64 tegenkomt. Roep je canvas.toDataURL() zonder argumenten aan, dan krijg je een PNG-data-URI terug. Tools voor browserautomatisering leveren screenshots aan als Base64-PNG, bijvoorbeeld page.screenshot({ encoding: 'base64' }) in Puppeteer of get_screenshot_as_base64() in Selenium. Grafiekrenderers, QR-codegeneratoren en API's voor beeldgeneratie sturen de afbeelding vaak terug als Base64-veld in JSON.

Een PNG-string is makkelijk te herkennen: hij begint altijd met iVBORw0KGgo, de codering van de PNG-handtekening van 8 bytes die begint met 89 50 4E 47. Daarna volgt AAAANSUhEUg, het begin van de IHDR-chunk waarin de breedte en hoogte staan.

Strings die je uit JSON kopieert, kun je beter eerst even controleren. Zo escapet json_encode van PHP standaard schuine strepen, waardoor een PNG uit een PHP-API kan binnenkomen met \/-reeksen. Vervang die door / en verwijder de omringende aanhalingstekens voordat je plakt.

Waarom opslaan als PNG

PNG comprimeert zonder detailverlies en slaat een volledig alfakanaal op, zodat zachte schaduwen en randen met anti-aliasing intact blijven. Daarom is het de logische keuze voor screenshots, interface-elementen, diagrammen en alles waar tekst in staat. Voor foto's leveren JPG en WebP veel kleinere bestanden op.

Een JPEG of WebP converteren naar PNG behoudt precies wat je op het scherm ziet, maar brengt geen details terug die de compressie met verlies al heeft weggegooid, en de PNG is meestal groter dan de bron.

Een Base64-PNG opslaan in code

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

// Browser: data-URI naar Blob, zonder handmatig te decoderen
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);

Wil je de andere kant op? PNG naar Base64 codeert een bestand naar een string of data-URI.