ฝังไดอะแกรมหรือภาพหน้าจอเป็น data URI ในไฟล์ Markdown หรือเอกสาร README รูปภาพเดินทางพร้อมกับเอกสารและแสดงผลได้อย่างถูกต้องโดยไม่ต้องโฮสต์ภายนอก
การทดสอบและการสร้างต้นแบบ
ใช้ Base64 data URI เป็นรูปภาพ placeholder ใน test fixture, Storybook story หรือไฟล์ HTML ต้นแบบ ไม่ต้องตั้ง static file server หรือจัดการ image asset ในช่วงพัฒนาเบื้องต้น
โครงสร้าง Data URI
data URI เข้ารหัสรูปแบบรูปภาพและเนื้อหาไบนารีในสตริงเดียว การเข้าใจโครงสร้างช่วยเมื่อสร้างหรือแยกวิเคราะห์ data URI โดยโปรแกรม:
วิธีแปลงรูปภาพเป็น Base64 data URI ในภาษาและสภาพแวดล้อมยอดนิยม:
JavaScript (browser)
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(file)
// reader.result → "data:image/png;base64,iVBORw0KGgo..."
})
}
// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."
// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."
Python
import base64
# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
encoded = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."
# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"
with open('photo.jpg', 'rb') as f:
b64 = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:{mime};base64,{b64}'
Node.js
import { readFileSync } from 'fs'
import { lookup } from 'mime-types'
// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"
const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."
// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
return `data:${mimeType};base64,${buf.toString('base64')}`
}
CLI (bash)
# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'
# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"
# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy
# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"
Base64 เป็นการเข้ารหัส ไม่ใช่การเข้ารหัสลับ ใครก็ตามที่เห็น data URI สามารถถอดรหัสกลับเป็นรูปภาพต้นฉบับได้ อย่าพึ่งพา Base64 เพื่อปกป้องรูปภาพที่เป็นความลับ เครื่องมือนี้ประมวลผลรูปภาพในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ใดๆ — แต่ data URI ที่ได้เป็นข้อความธรรมดาที่ใครก็ตามที่เข้าถึงซอร์สโค้ด HTML หรือ CSS ของคุณสามารถอ่านได้
ฉันจะแปลง Base64 data URI กลับเป็นไฟล์รูปภาพได้อย่างไร?