Base64 Image Decoder

Vad är Base64 bildavkodning?

Base64 bildavkodning är motsatsen till Base64 bildkodning: det tar en Base64-sträng eller data URI som representerar en bild och konverterar den tillbaka till synlig binär pixeldata. När du mottar en sträng som data:image/png;base64,iVBORw0KGgo..., tar avkodning bort data URI-prefixet, återför Base64-kodningen som definieras i RFC 4648 och rekonstruerar de ursprungliga bildbytena. Webbläsaren kan sedan återge de avkodade bytena som en synlig bild.

Data URI (RFC 2397) paketerar MIME-typ och Base64-kodad innehål i en enda sträng. De förekommer ofta i API-svar, HTML-e-postkällkod, CSS-stilmallar och databasposter där bilder lagras som text istället för binära filer. Avkodning av dessa strängar är nödvändig för att förhandsgranska bilden, verifiera dess innehål eller spara den som en fristående fil. Eftersom Base64 använder 4 ASCII-tecken för att representera varje 3 byte binär data är den kodade strängen alltid cirka 33% större än originalbilden.

Det här verktyget tolkar både fullständiga data URI (data:image/png;base64,...) och råa Base64-strängar utan data:-prefixet. För råa strängar detekteras bildformatet automatiskt genom att inspektera de första Base64-tecknen, som motsvarar filens magiska bytes — till exempel indikerar iVBORw0KGgo alltid en PNG-fil. Den avkodade bilden återges direkt i webbläsaren och kan laddas ner som en fil.

Ett vanligt utvecklarscenario är att arbeta med ett REST API som returnerar ett profilfoto eller dokumentminiatyr som en Base64-sträng inuti ett JSON-fält — till exempel {} med bild. För att använda bilden extraherar du fältvärdet, tar bort data URI-prefixet upp till och inklusive kommat, och matar sedan de återstående Base64-tecknen genom en avkodare såsom atob() i JavaScript eller base64.b64decode() i Python för att återhämta de råa bytena. Att klistra in hela värdet i det här verktyget hoppar över alla dessa manuella steg och återger bilden omedelbar.

Varför använda denna Base64 bildavkodare?

Det här verktyget konverterar Base64 bilddata helt i webbläsaren till en synlig, nedladdningsbar bild — utan uppladdning, utan serverbearbetning, inget konto krävs.

Base64 bildavkodningsfall

Data URI-struktur för bilder

En data URI paketerar bildtypen och kodad innehål i en enda sträng. Varje komponent är väsentlig för korrekt avkodning: schemat (data:) signalerar att URL:en är självinnehållen snarare än en referens till en extern resurs; MIME-typen (t.ex. image/png) talar om för renderaren vilket format som ska användas vid tolkning av råa bytes; markören ;base64, skiljer Base64-kodad innehål från data URI:er som använder procentkodning för vanlig text format. Base64 nyttolast själv kan sluta med en eller två = utfyllnadstecken — dessa krävs när inmatningsbytena inte är en multipel av tre, vilket garanterar att den kodade längden alltid är en multipel av fyra. Om du utelämnar eller trunkerar någon av dessa komponenter kan det orsaka avkodningsfel eller produkt en skadad bild.

Detektera bildformat från Base64

När en Base64-sträng saknar data:-prefixet kan bildformatet identifieras genom att inspektera de första tecknen. Dessa tecken motsvarar filens magiska bytes — fasta byte-sekvenser vid början av varje bildfil som identifierar formatet:

Kodexempel

Hur man avkodar Base64 bildsträngar tillbaka till bildfiler i populära språk och miljöer:

// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Method 1: fetch API (simplest)
const res  = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048

// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime    = header.match(/:(.*?);/)[1]   // → "image/png"
const binary  = atob(b64)
const bytes   = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2   = new Blob([bytes], { type: mime })

// Create a download link
const url = URL.createObjectURL(blob)
const a   = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)

import base64
import re

data_uri = 'data:image/png;base64,iVBORw0KGgo...'

# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1)    # → "image/png"
b64_data  = match.group(2)

# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')

with open(f'output.{ext}', 'wb') as f:
    f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)

# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)

import { writeFileSync } from 'fs'

const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1]  // → "image/png"

// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)

// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47>  (\x89PNG)
// JPEG → <Buffer ff d8 ff e0>

# Decode a raw Base64 string to an image file (Linux)
echo 'iVBORw0KGgo...' | base64 -d > output.png

# Decode a raw Base64 string to an image file (macOS)
echo 'iVBORw0KGgo...' | base64 -D > output.png

# Extract Base64 from a data URI and decode
echo 'data:image/png;base64,iVBORw0KGgo...' | \
  sed 's/^data:.*base64,//' | base64 -d > output.png

# Identify the image format from the decoded file
file output.png
# → output.png: PNG image data, 64 x 64, 8-bit/color RGBA

Vanliga frågor