Konvertera Base64 till PNG

Var Base64-kodade PNG-bilder kommer ifrån

PNG är det format du oftast stöter på som Base64. Anropar du canvas.toDataURL() utan argument får du en data URI i PNG-format. Verktyg för webbläsarautomatisering returnerar skärmbilder som Base64-kodad PNG, till exempel page.screenshot({ encoding: 'base64' }) i Puppeteer eller get_screenshot_as_base64() i Selenium. Diagramrenderare, QR-kodgeneratorer och API:er för bildgenerering returnerar ofta bilden som ett Base64-fält i JSON.

En PNG-sträng är lätt att känna igen: den börjar alltid med iVBORw0KGgo, kodningen av PNG-filens signatur på 8 byte som inleds med 89 50 4E 47. Därefter följer AAAANSUhEUg, som är början på IHDR-blocket med bredd och höjd.

Strängar som kopieras ur JSON behöver kontrolleras först. PHP:s json_encode sätter till exempel som standard ett omvänt snedstreck framför varje snedstreck, så en PNG från ett PHP-API kan innehålla sekvenser som \/. Ersätt dem med / och ta bort de omgivande citattecknen innan du klistrar in.

Varför spara som PNG

PNG komprimerar utan att förlora några detaljer och lagrar en fullständig alfakanal, så mjuka skuggor och kantutjämnade kanter förblir intakta. Det gör formatet till det naturliga valet för skärmbilder, gränssnittselement, diagram och allt som innehåller text. För foton ger JPG eller WebP betydligt mindre filer.

När du konverterar en JPEG eller WebP till PNG behålls exakt det som syns på skärmen, men detaljer som den förstörande komprimeringen redan har tagit bort kommer inte tillbaka, och PNG-filen blir oftast större än källfilen.

Spara en Base64-kodad PNG med kod

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

// Webbläsare: data URI till Blob, utan manuell avkodning
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);

Behöver du gå åt andra hållet? PNG till Base64 kodar en fil till en sträng eller data URI.