เครื่องมือถอดรหัสรูปภาพ Base64

การถอดรหัส 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 ใช้อักขระ ASCII 4 ตัวเพื่อแสดงไบต์ข้อมูลไบนารี 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 สำหรับรูปภาพ

data URI บรรจุประเภทรูปภาพและเนื้อหาที่เข้ารหัสลงในสตริงเดียว แต่ละส่วนประกอบมีความจำเป็นสำหรับการถอดรหัสที่ถูกต้อง: scheme (data:) ระบุว่า URL เป็นที่อยู่อาศัยเอง ไม่ใช่การอ้างอิงถึงทรัพยากรภายนอก ประเภท MIME (เช่น image/png) บอกเครื่องแสดงผลว่าใช้รูปแบบใดเมื่อตีความไบต์ดิบ เครื่องหมาย ;base64, แยกเนื้อหาที่เข้ารหัส Base64 จาก data URIs ที่ใช้การเข้ารหัสเปอร์เซ็นต์สำหรับรูปแบบข้อความธรรมชาติ เพย์โหลด 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

คำถามที่พบบ่อย