Base64 Image Decoder

Що таке декодування зображень Base64?

Декодування зображень Base64 є зворотною операцією кодування зображень Base64: воно бере рядок Base64 або data URI, який представляє зображення, і перетворює його назад в видні дані двійкових пікселів. Коли ви отримуєте рядок на кшталт data:image/png;base64,iVBORw0KGgo..., декодування видаляє префікс data URI, повертає кодування Base64, визначене в RFC 4648, і відновлює вихідні байти зображення. Потім браузер може відтворити декодовані байти як видиме зображення.

URI даних (RFC 2397) упаковують тип MIME і закодований вміст Base64 в один рядок. Вони часто з'являються у відповідях API, вихідному коді HTML-листів, таблицях стилів CSS і записах баз даних, де зображення зберігаються як текст замість двійкових файлів. Декодування цих рядків необхідне для попереднього перегляду зображення, перевірки його вмісту або збереження його як окремого файлу. Оскільки Base64 використовує 4 символи ASCII для представлення кожних 3 байтів двійкових даних, закодований рядок завжди приблизно на 33% більший за вихідне зображення.

Цей інструмент аналізує як повні URI даних (data:image/png;base64,...), так і необроблені рядки Base64 без префікса data:. Для необроблених рядків формат зображення визначається автоматично шляхом перевірки перших кількох символів Base64, які відповідають магічним байтам файлу — наприклад, iVBORw0KGgo завжди вказує на файл PNG. Декодоване зображення відображається прямо в браузері і може бути завантажене як файл.

Типовий сценарій розробника — робота з REST API, який повертає фотографію профілю або мініатюру документа як рядок Base64 всередину поля JSON — наприклад, {} з зображенням. Щоб використати зображення, ви витягуєте значення поля, видаляєте префікс data URI до запятої включно, а потім передаєте решту символів Base64 через декодер, такий як atob() у JavaScript або base64.b64decode() у Python, щоб відновити необроблені байти. Вставлення повної вартості в цей інструмент пропускає всі ці ручні кроки і одразу відображає зображення.

Чому користуватися цим декодером зображень Base64?

Цей інструмент повністю у вашому браузері перетворює дані зображення Base64 на видиме, те що можна завантажити зображення — без завантаження, без обробки сервером, без потреби облікового запису.

Варіанти використання декодування зображень Base64

Структура data URI для зображень

URI даних упаковує тип зображення та закодований вміст в один рядок. Кожен компонент є істотним для правильного декодування: схема (data:) сигналізує про те, що URL є автономним, а не посиланням на зовнішній ресурс; тип MIME (наприклад image/png) розповідає програмі перегляду, який формат використовувати при інтерпретації необроблених байтів; маркер ;base64, відрізняє закодований вміст Base64 від URI даних, які використовують кодування відсотками для форматів простого тексту. Сама корисне навантаження Base64 може закінчуватися одним або двома символами вирівнювання = — вони потрібні, коли кількість вхідних байтів не кратна трьом, гарантуючи, що закодована довжина завжди кратна чотирьом. Пропуск або скорочення будь-якого з цих компонентів призводить до неправильного декодування або створення пошкодженого зображення.

Виявлення формату зображення з Base64

Коли рядок Base64 не містить префіксу data:, формат зображення можна визначити, перевіривши перші кілька символів. Ці символи відповідають магічним байтам файлу — фіксованим послідовностям байтів на початку кожного файлу зображення, які визначають формат:

Приклади коду

Як декодувати рядки зображень Base64 назад у файли зображень у популярних мовах і середовищах:

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

Поширені запитання