Dekoder obrazów Base64

Co to jest dekodowanie obrazów Base64?

Dekodowanie obrazów Base64 jest odwrotnością kodowania obrazów Base64: przyjmuje ciąg Base64 lub URI danych reprezentujący obraz i konwertuje go z powrotem na widoczne dane pikseli binarnych. Gdy otrzymasz ciąg taki jak data:image/png;base64,iVBORw0KGgo..., dekodowanie usuwa prefiks URI danych, odwraca kodowanie Base64 zdefiniowane w RFC 4648 i rekonstruuje oryginalne bajty obrazu. Przeglądarka może następnie renderować zdekodowane bajty jako widoczny obraz.

Identyfikatory URI danych (RFC 2397) łączą typ MIME i zawartość zakodowaną Base64 w jeden ciąg. Pojawiają się często w odpowiedziach API, kodzie źródłowym wiadomości e-mail HTML, arkuszach stylów CSS i rekordach bazy danych, w których obrazy są przechowywane jako tekst zamiast plików binarnych. Dekodowanie tych ciągów jest konieczne do podglądu obrazu, weryfikacji jego zawartości lub zapisania go jako pliku samodzielnego. Ponieważ Base64 używa 4 znaków ASCII do reprezentacji każdych 3 bajtów danych binarnych, zakodowany ciąg jest zawsze około 33% większy niż oryginalny obraz.

To narzędzie analizuje zarówno pełne URI danych (data:image/png;base64,...) jak i surowe ciągi Base64 bez prefiksu data:. W przypadku surowych ciągów format obrazu jest automatycznie wykrywany poprzez sprawdzenie kilku pierwszych znaków Base64, które odpowiadają magicznym bajtom pliku — na przykład iVBORw0KGgo zawsze wskazuje plik PNG. Zdekodowany obraz jest renderowany bezpośrednio w przeglądarce i można go pobrać jako plik.

Typowy scenariusz programisty to praca z interfejsem REST API, który zwraca zdjęcie profilowe lub miniaturę dokumentu jako ciąg Base64 wewnątrz pola JSON — na przykład {} z obrazem. Aby użyć obrazu, wyodrębniasz wartość pola, usuwasz prefiks URI danych aż do przecinka włącznie, a następnie przekazujesz pozostałe znaki Base64 przez dekoder, taki jak atob() w JavaScript lub base64.b64decode() w Pythonie, aby odzyskać surowe bajty. Wklejenie pełnej wartości do tego narzędzia pomija wszystkie te ręczne kroki i natychmiast renderuje obraz.

Dlaczego warto używać tego dekodera obrazów Base64?

To narzędzie konwertuje dane obrazu Base64 całkowicie w Twojej przeglądarce na widoczny, pobieralny obraz — bez przesyłania, bez przetwarzania na serwerze, bez wymaganego konta.

Przypadki użycia dekodowania obrazów Base64

Struktura URI danych dla obrazów

URI danych pakuje typ obrazu i zakodowaną zawartość w jeden ciąg. Każdy komponent jest niezbędny do prawidłowego dekodowania: schemat (data:) wskazuje, że adres URL jest samodzielny, a nie odwołaniem do zasobu zewnętrznego; typ MIME (np. image/png) mówi renderowi, jaki format użyć podczas interpretacji surowych bajtów; znacznik ;base64, rozróżnia zawartość zakodowaną Base64 od URI danych, które używają kodowania procentowego dla formatów zwykłego tekstu. Sam ładunek Base64 może kończyć się jednym lub dwoma znakami dopełnienia = — są one wymagane, gdy liczba bajtów wejściowych nie jest wielokrotnością trzech, zapewniając, że długość zakodowana jest zawsze wielokrotnością czterech. Pominięcie lub obcięcie któregokolwiek z tych komponentów powoduje niepowodzenie dekodowania lub vytwarza uszkodzony obraz.

Wykrywanie formatu obrazu z Base64

Jeśli ciąg Base64 nie ma prefiksu data:, format obrazu można zidentyfikować, sprawdzając kilka pierwszych znaków. Te znaki odpowiadają magicznym bajtom pliku — stałym sekwencjom bajtów na początku każdego pliku obrazu, które identyfikują format:

Przykłady kodu

Jak dekodować ciągi obrazów Base64 z powrotem do plików obrazów w popularnych językach i środowiskach:

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

Często zadawane pytania