Base64 Image Decoder

Co je dekódování Base64 obrázků?

Dekódování Base64 obrázků je opakem kódování Base64 obrázků: vezme řetězec Base64 nebo data URI, který představuje obrázek, a převede jej zpět na viditelná binární data pixelů. Když obdržíte řetězec jako data:image/png;base64,iVBORw0KGgo..., dekódování odstraní předponu data URI, vrátí kódování Base64 definované v RFC 4648 a rekonstruuje původní bajty obrázku. Prohlížeč pak může vykreslit dekódované bajty jako viditelný obrázek.

Data URI (RFC 2397) spojují typ MIME a obsah zakódovaný Base64 do jednoho řetězce. Často se vyskytují v odpovědích API, zdrojovém kódu HTML e-mailů, stylech CSS a záznamech databází, kde jsou obrázky uloženy jako text místo binárních souborů. Dekódování těchto řetězců je nutné k zobrazení náhledu obrázku, ověření jeho obsahu nebo uložení jako samostatného souboru. Protože Base64 používá 4 znaky ASCII k reprezentaci každých 3 bajtů binárních dat, kódovaný řetězec je vždy přibližně o 33% větší než původní obrázek.

Tento nástroj analyzuje jak úplné data URI (data:image/png;base64,...), tak surové řetězce Base64 bez předpony data:. U syrových řetězců je formát obrázku detekován automaticky kontrolou prvních několika znaků Base64, které odpovídají magickým bajtům souboru — například iVBORw0KGgo vždy označuje soubor PNG. Dekódovaný obrázek je vykreslen přímo v prohlížeči a lze jej stáhnout jako soubor.

Běžný scénář vývojáře je práce s REST API, která vrací fotografie profilu nebo miniatury dokumentů jako řetězec Base64 uvnitř pole JSON — například {} nebo {}. Chcete-li obrázek použít, extrahujete hodnotu pole, odstraníte předponu data URI až do čárky (včetně), a poté zbývající znaky Base64 proveďte přes dekodér, jako je atob() v JavaScriptu nebo base64.b64decode() v Pythonu, abyste obnovili surové bajty. Vložení celé hodnoty do tohoto nástroje přeskočí všechny tyto ruční kroky a obrázek se vykreslí ihned.

Proč používat tento dekodér Base64 obrázků?

Tento nástroj převede data Base64 obrázků zcela v prohlížeči na viditelný obrázek ke stažení — bez nahrávání, bez zpracování na serveru, bez potřeby účtu.

Případy použití dekódování Base64 obrázků

Struktura data URI pro obrázky

Data URI balí typ obrázku a zakódovaný obsah do jednoho řetězce. Každá komponenta je zásadní pro správné dekódování: schéma (data:) signalizuje, že URL je samo-obsažený, spíše než odkaz na externí prostředek; typ MIME (např. image/png) říká rendereru, který formát použít při interpretaci syrových bajtů; značka ;base64, rozlišuje obsah zakódovaný Base64 od dat URI, která pro formáty prostého textu používají procenta-kódování. Datová část Base64 se sama může končit jedním nebo dvěma znaky = odsazení — ty jsou povinné, když počet vstupních bajtů není násobkem tří, což zajišťuje, že kódovaná délka je vždy násobkem čtyř. Vynechání nebo zkrácení kteréhokoli z těchto komponent způsobí selhání dekódování nebo vytvoření poškozeného obrázku.

Detekce formátu obrázku z Base64

Pokud řetězci Base64 chybí předpona data:, lze formát obrázku identifikovat kontrolou prvních několika znaků. Tyto znaky odpovídají magickým bajtům souboru — pevné sekvence bajtů na začátku každého souboru obrázku, které identifikují formát:

Příklady kódu

Jak dekódovat řetězce Base64 obrázků zpět do souborů obrázků v oblíbených jazycích a prostředích:

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

Často kladené otázky