Bộ giải mã hình ảnh Base64

Giải mã Base64 hình ảnh là gì?

Giải mã Base64 hình ảnh là hoạt động ngược lại của mã hóa Base64 hình ảnh: nó lấy một chuỗi Base64 hoặc URI dữ liệu đại diện cho một hình ảnh và chuyển đổi nó trở lại thành dữ liệu pixel nhị phân có thể nhìn thấy. Khi bạn nhận được một chuỗi như data:image/png;base64,iVBORw0KGgo..., giải mã sẽ loại bỏ tiền tố URI dữ liệu, đảo ngược mã hóa Base64 được định nghĩa trong RFC 4648 và tái tạo các byte hình ảnh gốc. Trình duyệt sau đó có thể hiển thị các byte được giải mã dưới dạng một hình ảnh có thể nhìn thấy.

URI dữ liệu (RFC 2397) gói loại MIME và nội dung được mã hóa Base64 vào một chuỗi duy nhất. Chúng thường xuất hiện trong phản hồi API, mã nguồn email HTML, bảng tính CSS và bản ghi cơ sở dữ liệu nơi hình ảnh được lưu trữ dưới dạng văn bản thay vì tệp nhị phân. Giải mã các chuỗi này là cần thiết để xem trước hình ảnh, xác minh nội dung hoặc lưu nó dưới dạng tệp độc lập. Vì Base64 sử dụng 4 ký tự ASCII để biểu diễn mỗi 3 byte dữ liệu nhị phân, chuỗi được mã hóa luôn lớn hơn khoảng 33% so với hình ảnh gốc.

Công cụ này phân tích cả URI dữ liệu đầy đủ (data:image/png;base64,...) và chuỗi Base64 thô mà không có tiền tố data:. Đối với các chuỗi thô, định dạng hình ảnh được phát hiện tự động bằng cách kiểm tra một vài ký tự Base64 đầu tiên, tương ứng với các byte kỳ diệu của tệp — ví dụ, iVBORw0KGgo luôn chỉ ra tệp PNG. Hình ảnh được giải mã được hiển thị trực tiếp trong trình duyệt và có thể được tải xuống dưới dạng tệp.

Một kịch bản phổ biến của nhà phát triển là làm việc với API REST trả về ảnh hồ sơ hoặc hình nhỏ tài liệu dưới dạng chuỗi Base64 bên trong trường JSON — ví dụ, {} với hình ảnh. Để sử dụng hình ảnh, bạn trích xuất giá trị trường, xóa tiền tố URI dữ liệu đến và bao gồm dấu phẩy, sau đó chuyển các ký tự Base64 còn lại thông qua bộ giải mã như atob() trong JavaScript hoặc base64.b64decode() trong Python để khôi phục các byte thô. Dán toàn bộ giá trị vào công cụ này sẽ bỏ qua tất cả các bước thủ công này và hiển thị hình ảnh ngay lập tức.

Tại sao sử dụng Bộ giải mã hình ảnh Base64 này?

Công cụ này chuyển đổi dữ liệu hình ảnh Base64 hoàn toàn trong trình duyệt của bạn thành một hình ảnh có thể xem và tải xuống — không tải lên, không xử lý máy chủ, không cần tài khoản.

Trường hợp sử dụng giải mã Base64 hình ảnh

Cấu trúc URI dữ liệu cho hình ảnh

URI dữ liệu gói loại hình ảnh và nội dung được mã hóa thành một chuỗi duy nhất. Mỗi thành phần đều cần thiết để giải mã chính xác: lược đồ (data:) báo hiệu rằng URL là tự chứa đựng hơn là tham chiếu tới tài nguyên bên ngoài; loại MIME (ví dụ image/png) cho trình kết xuất biết định dạng nào sử dụng khi diễn giải các byte thô; công cụ đánh dấu ;base64, phân biệt nội dung được mã hóa Base64 từ các URI dữ liệu sử dụng mã hóa phần trăm cho các định dạng văn bản thuần. Tải trọng Base64 tự nó có thể kết thúc bằng một hoặc hai ký tự đệm = — những ký tự này cần thiết khi số lượng byte đầu vào không phải là bội số của ba, đảm bảo độ dài được mã hóa luôn là bội số của bốn. Bỏ qua hoặc cắt ngắn bất kỳ thành phần nào trong số này sẽ gây ra lỗi giải mã hoặc tạo ra hình ảnh bị hỏng.

Phát hiện định dạng hình ảnh từ Base64

Khi chuỗi Base64 không có tiền tố data:, định dạng hình ảnh có thể được xác định bằng cách kiểm tra một vài ký tự đầu tiên. Các ký tự này tương ứng với các byte kỳ diệu của tệp — các chuỗi byte cố định ở đầu mỗi tệp hình ảnh xác định định dạng:

Ví dụ mã

Cách giải mã chuỗi hình ảnh Base64 trở lại tệp hình ảnh trong các ngôn ngữ và môi trường phổ biến:

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

Câu hỏi thường gặp