Base64 in PNG

So wandeln Sie Base64 in PNG um

1. Fügen Sie das Base64 oder die vollständige URI data:image/png;base64,... in das Feld ein. Stattdessen können Sie auch eine .txt-Datei mit der Zeichenkette öffnen oder ablegen.
2. Prüfen Sie die Statuszeile: Sie sollte Gültiges Base64 und bei Erkannt PNG zeigen. Die Vorschau zeigt das Bild und seine Pixelgröße.
3. Ändern Sie bei Bedarf Dateiname. Endung steht bereits auf png.
4. Drücken Sie Datei herunterladen.

Stellt sich heraus, dass die Daten ein anderes Format haben, erscheint über der Vorschau ein Hinweis, zum Beispiel „Erkannt: JPEG, erwartet: PNG.“, mit einer Schaltfläche Als .jpg herunterladen. Umbenennen wandelt nichts um, daher ist Speichern unter der echten Endung meist die bessere Wahl.

Woher PNG-Base64 kommt

PNG ist die Standardausgabe vieler Tools, die Bilder als Text liefern:

• canvas.toDataURL() liefert in Browsern eine PNG-Data-URI, sofern Sie keinen anderen Typ anfordern. Unterschriftenfelder, Zeichen-Apps und Diagrammbibliotheken, die Bilder exportieren, bauen darauf auf.
• Browser-Automatisierung: Seleniums get_screenshot_as_base64() und Puppeteers page.screenshot({ encoding: "base64" }) liefern PNG-Screenshots als reines Base64 ohne Präfix. Testberichte betten sie oft in JSON oder HTML ein.
• APIs für QR-Codes, Barcodes, Captchas, Karten und Bildgenerierung liefern PNGs häufig in einem JSON-Feld.
• HTML und CSS mit eingebetteten Icons sowie Exporte von Berichten und Notebooks als Einzeldatei.

All das lässt sich direkt einfügen. Zeilenumbrüche, ein fehlendes = am Ende und URL-sichere Zeichen werden toleriert; die Statuszeile vermerkt, wenn Padding ergänzt wurde.

Den PNG-Header lesen

Ein PNG beginnt mit einer 8-Byte-Signatur, gefolgt vom Chunk IHDR, der die Grundeigenschaften des Bildes enthält. Drücken Sie Hex-Dump anzeigen, um sie zu sehen. Bei einem 120×40-Bild mit Transparenz lauten die ersten beiden Zeilen:

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.>|

Der Farbtyp verrät, welche Art PNG Sie haben: 00 Graustufen, 02 RGB, 03 Palette (indiziert), 04 Graustufen mit Alpha, 06 RGB mit Alpha. Ein Paletten-PNG aus einem Optimierer ist oft viel kleiner als ein RGBA-PNG, gut zu wissen, wenn das Base64 kurz sein muss.

Wirken die Abmessungen absurd, etwa eine Breite von mehreren Millionen Pixeln, sind die Bytes nach der Signatur beschädigt, und die Vorschau wird scheitern.

Ein PNG im Code prüfen

Dieselben Header-Felder lassen sich mit ein paar Zeilen Python ohne Bildbibliothek lesen. Das Aufteilen am Komma sorgt dafür, dass es mit reinem Base64 und Data-URIs gleichermaßen funktioniert:

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}

Um die Datei in Node.js zu schreiben, genügt fs.writeFileSync("shot.png", Buffer.from(b64, "base64")). Nodes Base64-Decoder überspringt Zeilenumbrüche und akzeptiert auch URL-sichere Zeichen. Mehr unter Base64 in Python und Base64 in Node.js.

Wenn sich das PNG nicht dekodieren oder anzeigen lässt

• Fehler „Ungültiges Zeichen“. In der Zeichenkette steht etwas anderes als Base64: ein JSON-Escape wie \/, eine HTML-Entity oder der Rest einer Log-Zeile. Der Fehler nennt die Position, und Base64 reparieren räumt die üblichen Verdächtigen auf.
• Das Bild wird nur teilweise oder gar nicht gezeichnet. Die Zeichenkette wurde abgeschnitten. Ein vollständiges PNG endet mit einem IEND-Chunk; vergleichen Sie Größe mit der Originaldatei, falls Sie sie kennen.
• „Erwartet: PNG, erkannt: …“. Die Bytes beginnen überhaupt nicht mit der PNG-Signatur. Das ist typisch für verschlüsselte Daten, eine andere Kodierung wie Hex oder zweimal kodiertes Base64; in diesem Fall erscheint Erneut dekodieren.
• Die Vorschau funktioniert, aber ein anderes Programm lehnt die Datei ab. Vergleichen Sie den hier angezeigten SHA-256 mit dem Hash der Datei, die das Programm erhalten hat. Stimmen sie überein, ist die dekodierte Datei korrekt, und das Problem liegt beim Programm.

Für die Gegenrichtung, ein PNG kodieren, nutzen Sie PNG in Base64.

Häufige Fragen