Base64 เป็นรูปภาพ
วางรูปภาพด้านซ้าย
แปลงข้อมูลเข้ารหัส Base64 กลับเป็นรูปภาพที่ดูตัวอย่างได้และดาวน์โหลด รองรับรูปแบบภาพทั่วไปกว่า 7 รูปแบบ เช่น PNG/JPG/WebP/GIF/SVG รู้จำนำหน้า Data URL อัตโนมัติ ดูตัวอย่างได้โดยตรงในเบราว์เซอร์ เหมาะสำหรับดีบักอินเทอร์เฟซและตรวจสอบการเข้ารหัส
คำแนะนำที่เกี่ยวข้อง
Base64 เป็นรูปภาพคืออะไร?
การแปลง Base64 เป็นรูปภาพเป็นกระบวนการย้อนกลับของการเข้ารหัส Base64: แปลงสตริงที่เข้ารหัส Base64 กลับเป็นข้อมูลภาพไบนารีดั้งเดิม (เช่น รูปแบบ PNG / JPG / WebP / GIF / SVG ฯลฯ) แล้วดูตัวอย่างหรือดาวน์โหลดเป็นไฟล์รูปภาพในเครื่องโดยตรงในเบราว์เซอร์ เป็นเครื่องมือจำเป็นสำหรับจัดการรูปภาพที่ส่งคืนจาก API ทรัพยากรอินไลน์ (Data URL) ไฟล์แนบอีเมล Base64 และสถานการณ์อื่นๆ
**หลักการสำคัญ:** Base64 เข้ารหัสข้อมูลไบนารีเป็นอักขระ ASCII ที่พิมพ์ได้ 64 ตัว (A-Z, a-z, 0-9, +, /) การแปลงเป็นรูปภาพคือการแปลงสตริง ASCII นี้กลับเป็นสตรีมไบต์ไบนารีดั้งเดิม แล้วให้เบราว์เซอร์แยกวิเคราะห์ตามประเภท MIME ที่ระบุ (เช่น image/png) เพื่อแสดงเป็นพิกเซลรูปภาพ Data URL (เช่น `data:image/png;base64,iVBORw0KGgo...`) เป็นรูปแบบผสมของ Base64 + นำหน้า MIME ซึ่งเครื่องมือจะรู้จำและประมวลผลโดยอัตโนมัติ
**สถานการณ์การใช้งานทั่วไป:** ①ดีบัก API: API จำนวนมากส่งคืนสตริง Base64 โดยตรงเมื่อส่งคืนแคปต์ชารูปภาพ อวตารผู้ใช้ ลายเซ็นอิเล็กทรอนิกส์ ซึ่งฝั่งฟรอนต์เอนด์ต้องแปลงกลับเพื่อดู; ②พัฒนาฟรอนต์เอนด์: ไอคอนขนาดเล็กที่ฝังด้วย Data URL (CSS background-image: url(data:image/png;base64,...)) สามารถวางในเครื่องมือเพื่อดูผลลัพธ์จริง; ③กู้คืนไฟล์แนบอีเมล: ไฟล์แนบที่เข้ารหัส MIME Base64 สามารถถอดรหัสกลับเป็นรูปภาพเดิมเพื่อบันทึก; ④ข้อมูลเว็บสแครปเปอร์: รูปภาพ Base64 ที่รวบรวมสามารถถอดรหัสแล้วบันทึกเป็นไฟล์ในเครื่อง; ⑤การประมวลผลล่วงหน้า OCR: ถอดรหัสแล้วใช้เครื่องมือ OCR เพื่อจดจำเนื้อหารูปภาพ
**รูปแบบภาพที่รองรับ:** เครื่องมือรองรับทุกประเภท MIME รูปภาพที่เบราว์เซอร์รู้จำตามธรรมชาติ: PNG (image/png), JPG/JPEG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), AVIF (image/avif), ICO (image/x-icon) ฯลฯ แต่ละรูปแบบมีอัลกอริทึมการบีบอัดและสถานการณ์การใช้งานที่แตกต่างกัน: PNG ไม่สูญเสียข้อมูลเหมาะกับไอคอนและภาพหน้าจอ JPG สูญเสียข้อมูลเหมาะกับรูปภาพถ่าย WebP แนะนำสำหรับเบราว์เซอร์สมัยใหม่ SVG เวกเตอร์เหมาะกับไอคอนและ logo
**ความปลอดภัยในการถอดรหัส:** การดำเนินการถอดรหัสทั้งหมดทำในเบราว์เซอร์ผ่าน JavaScript (อาศัย `atob()` + `TextDecoder` หรือ `Blob` API) ข้อมูลไบนารีรูปภาพไม่อัปโหลดไปยังเซิร์ฟเวอร์ใดๆ สามารถใช้งานสตริง Base64 ที่มีข้อมูลละเอียดอ่อน (เช่น อวตารผู้ใช้ ภาพหน้าจอภายใน) ได้อย่างปลอดภัย ข้อมูลทั้งหมดจะถูกลบอัตโนมัติเมื่อปิดหน้า
กรณีการใช้งาน
- แปลงข้อมูลรูปภาพ Base64 ที่ส่งคืนจาก API กลับเป็นไฟล์รูปภาพที่ดูตัวอย่างและดาวน์โหลดได้
- ตรวจสอบว่าทรัพยากรรูปภาพอินไลน์ฟรอนต์เอนด์ (รูปแบบ Data URL) เข้ารหัสถูกต้องหรือไม่
- ยืนยันว่าเนื้อหา Base64 สมบูรณ์หรือไม่เมื่อดีบักอินเทอร์เฟซอัปโหลดรูปภาพ
- บันทึกรูปภาพ Base64 เป็นไฟล์ PNG/JPG ในเครื่องเพื่อใช้ในการออกแบบหรือเอกสาร
- ถอดรหัส Base64 ไฟล์แนบอีเมลเพื่อกู้คืนเป็นรูปภาพ
- กู้คืนรูปภาพ Base64 ที่รวบรวมจากเว็บสแครปเปอร์แล้วบันทึกลงดิสก์
- ถอดรหัส Data URL เพื่อตรวจสอบเอฟเฟกต์การเรนเดอร์จริงของไอคอน SVG
- แปลงรูปภาพ Base64 ที่ส่งคืนจากอินเทอร์เฟซ OCR / AI กลับเป็นไฟล์ในเครื่องเพื่อดู
วิธีการใช้งาน
- วางข้อมูลรูปภาพที่เข้ารหัส Base64 (รองรับมีหรือไม่มีนำหน้า Data URL เช่น data:image/png;base64,iVBORw0KG...)
- เครื่องมือตรวจหาประเภท MIME และถอดรหัสโดยอัตโนมัติ (รู้จำใน Data URL หรือดมจากส่วนหัวเนื้อหา)
- ด้านขวาแสดงตัวอย่างรูปภาพ ขนาดไฟล์ และข้อมูลขนาดแบบเรียลไทม์
- คลิก「ดาวน์โหลด」เพื่อบันทึกเป็นไฟล์รูปภาพในเครื่อง หรือคลิกขวาที่รูปภาพ「บันทึกรูปภาพเป็น」
- หากถอดรหัสล้มเหลว สามารถระบุประเภท MIME ด้วยตนเองหรือใช้เครื่องมือ Base64 Clean ประมวลผลล่วงหน้า
คุณสมบัติ
- ดูตัวอย่างรูปภาพออนไลน์: แสดงรูปภาพโดยตรงในเบราว์เซอร์หลังถอดรหัส ไม่ต้องดาวน์โหลดไปยังเครื่อง
- รองรับหลายรูปแบบ: รองรับประเภท MIME รูปภาพทั่วไปกว่า 7 รูปแบบ เช่น PNG / JPG / WebP / GIF / SVG / BMP / AVIF
- รู้จำ Data URL อัตโนมัติ: ตัดนำหน้า data:image/png;base64, อัตโนมัติ แยกเนื้อหา Base64 บริสุทธิ์เพื่อถอดรหัส
- อินพุต Base64 บริสุทธิ์: รองรับสตริง Base64 บริสุทธิ์ที่ไม่มีนำหน้า สามารถระบุประเภท MIME
- ดาวน์โหลดไฟล์รูปภาพ: รองรับการบันทึกรูปภาพหลังถอดรหัสเป็นไฟล์ PNG/JPG ในเครื่องด้วยคลิกเดียว
- นับจำนวนอักขระแบบเรียลไทม์: แสดงจำนวนอักขระอินพุต จำนวนไบต์หลังถอดรหัสแบบเรียลไทม์ สะดวกสำหรับประเมินขนาดรูปภาพ
- ตรวจจับข้อผิดพลาด: แจ้งตำแหน่งข้อผิดพลาดเฉพาะเมื่อถอดรหัสล้มเหลว (อักขระ Base64 ไม่ถูกต้อง ความยาวไม่ถูกต้อง MIME ไม่ตรงกัน)
- ไม่อัปโหลดในเบราว์เซอร์: การถอดรหัสและดูตัวอย่างทั้งหมดทำในเบราว์เซอร์ ไม่ผ่านเซิร์ฟเวอร์ใดๆ
- เข้ากันได้แบบย้อนกลับอย่างสมบูรณ์: ใช้คู่กับเครื่องมือ「รูปภาพเป็น Base64」เพื่อสร้างเวิร์กโฟลว์การแปลงสองทางที่สมบูรณ์
ตัวอย่างโค้ด
JavaScript: ถอดรหัสธรรมชาติของเบราว์เซอร์ + ดูตัวอย่าง Blob URL
javascriptใช้ atob() + TextDecoder + Blob API ธรรมชาติของเบราว์เซอร์เพื่อถอดรหัส Base64 และแสดงรูปภาพในเบราว์เซอร์
// Base64 → รูปภาพ (การใช้งานธรรมชาติของเบราว์เซอร์)
function base64ToImage(base64String, mimeType = 'image/png') {
// 1. ลบนำหน้า Data URL (ถ้ามี)
const clean = base64String.replace(/^data:image\/\w+;base64,/, '');
// 2. atob() ธรรมชาติของเบราว์เซอร์ถอดรหัสเป็นสตริงไบนารี
const binary = atob(clean);
// 3. แปลงเป็น Uint8Array
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
bytes[i] = binary.charCodeAt(i);
}
// 4. สร้าง Blob URL เพื่อใช้ดูตัวอย่างในแท็ก <img>
const blob = new Blob([bytes], { type: mimeType });
const url = URL.createObjectURL(blob);
// 5. ตั้งค่า img.src ก็สามารถดูตัวอย่างได้
const img = document.createElement('img');
img.src = url;
img.onload = () => {
console.log(`ขนาดรูปภาพ: ${img.width}x${img.height}`);
console.log(`ขนาดไฟล์: ${bytes.byteLength} bytes`);
};
return { img, url, size: bytes.byteLength };
}
// ตัวอย่างการใช้งาน:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);
// คืนหน่วยความจำ Blob URL (หลีกเลี่ยงการรั่วไหลของหน่วยความจำ)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);Python: ถอดรหัสด้วยไลบรารี base64 และบันทึกรูปภาพ
pythonไลบรารีมาตรฐาน Python base64 ถอดรหัสข้อมูล Base64 เป็นสตรีมไบนารีรูปภาพ แล้วบันทึกด้วย PIL/Pillow หรือการดำเนินการไฟล์ในตัว
import base64
from pathlib import Path
def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
"""ถอดรหัสสตริง Base64 และบันทึกเป็นไฟล์รูปภาพ"""
# 1. ลบนำหน้า Data URL
if base64_string.startswith('data:image'):
# รูปแบบ: data:image/png;base64,iVBORw0...
header, base64_string = base64_string.split(',', 1)
# แยก MIME จาก header อัตโนมัติ
if 'image/' in header:
mime_type = header.split('data:')[1].split(';')[0]
# 2. ถอดรหัส
image_bytes = base64.b64decode(base64_string)
# 3. บันทึกลงไฟล์
output_file = Path(output_path)
output_file.parent.mkdir(parents=True, exist_ok=True)
output_file.write_bytes(image_bytes)
print(f"✅ บันทึกแล้ว: {output_file}")
print(f" ขนาดไฟล์: {len(image_bytes):,} bytes")
print(f" ประเภท MIME: {mime_type}")
return output_file
# ตัวอย่างการใช้งาน:
# 1. สตริง Base64 ที่ได้รับจากการตอบสนอง API
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."
# 2. ถอดรหัสและบันทึก
base64_to_image(api_base64_response, 'output/captcha.png')
# 3. ตัวเลือก: ใช้ PIL ประมวลผลเพิ่มเติม
try:
from PIL import Image
img = Image.open('output/captcha.png')
print(f"ขนาดรูปภาพ: {img.size}")
img.save('output/captcha.png', optimize=True)
except ImportError:
print('ติดตั้ง Pillow เพื่อประมวลผลรูปภาพ: pip install Pillow')Java: java.util.Base64 + ImageIO ถอดรหัสรูปภาพ
javaไลบรารีมาตรฐาน Java Base64 ถอดรหัสสตรีมไบนารีรูปภาพ ร่วมกับ ImageIO / BufferedImage ประมวลผลข้อมูลเมตาดาต้ารูปภาพ
import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
public class Base64ToImage {
public static void main(String[] args) throws Exception {
String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
String mimeType = "image/png";
// 1. ลบนำหน้า Data URL (ถ้ามี)
if (base64String.startsWith("data:image")) {
int commaIdx = base64String.indexOf(',');
String header = base64String.substring(0, commaIdx);
base64String = base64String.substring(commaIdx + 1);
// แยก MIME จาก header
if (header.contains("image/")) {
mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
}
}
// 2. ถอดรหัส Base64
byte[] imageBytes = Base64.getDecoder().decode(base64String);
// 3. บันทึกลงไฟล์
String extension = mimeType.substring("image/".length());
File outputFile = new File("output." + extension);
try (FileOutputStream fos = new FileOutputStream(outputFile)) {
fos.write(imageBytes);
}
System.out.println("✅ บันทึกแล้ว: " + outputFile.getAbsolutePath());
System.out.println(" ขนาดไฟล์: " + imageBytes.length + " bytes");
// 4. (ตัวเลือก) อ่านข้อมูลเมตาดาต้ารูปภาพ
ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
BufferedImage image = ImageIO.read(bais);
if (image != null) {
System.out.println("ขนาดรูปภาพ: " + image.getWidth() + "x" + image.getHeight());
}
}
}คำถามที่พบบ่อย
รองรับรูปแบบรูปภาพอะไรบ้าง?
รองรับทุกประเภท MIME รูปภาพที่เบราว์เซอร์รู้จำตามธรรมชาติ เช่น PNG, JPG, WebP, GIF, SVG, BMP, AVIF, ICO เครื่องมือจะตัดสินโดยอัตโนมัติตามนำหน้า MIME ใน Data URL หรือลักษณะอินพุต หรือสามารถระบุประเภท MIME ด้วยตนเองบนอินเทอร์เฟซ การเลือกรูปแบบที่ถูกต้องจะช่วยให้เบราว์เซอร์ถอดรหัสและแสดงผลได้อย่างถูกต้อง
อินพุตต้องมีนำหน้า data:image/png;base64 หรือไม่?
ไม่จำเป็น เครื่องมือรองรับอินพุตสองรูปแบบ: ①สตริง Base64 บริสุทธิ์ (เช่น iVBORw0KGgoAA...) ต้องเลือกประเภท MIME บนอินเทอร์เฟซ (เช่น PNG / JPG); ②รูปแบบ Data URL (เช่น data:image/png;base64,iVBORw0KGgo...) เครื่องมือรู้จำประเภท MIME ในนำหน้าและถอดรหัสโดยอัตโนมัติ รองรับทั้งสองวิธีอินพุต
สามารถดูตัวอย่างโดยตรงในเบราว์เซอร์ได้หรือไม่?
ได้ รูปภาพหลังถอดรหัสจะแสดงโดยตรงในเบราว์เซอร์ผ่าน Blob URL รองรับการดูตัวอย่างออนไลน์ หลังจากยืนยันว่าเนื้อหาถูกต้องแล้ว จึงดาวน์โหลดเป็นไฟล์ในเครื่องหรือคัดลอก Data URL เพื่อฝังใน HTML/CSS กระบวนการดูตัวอย่างทั้งหมดไม่จำเป็นต้องมีคำขอเครือข่าย
แตกต่างจากเครื่องมือ Base64 เป็นไฟล์อย่างไร?
Base64 เป็นรูปภาพได้รับการปรับแต่งเฉพาะสำหรับรูปแบบภาพ: ①รู้จำประเภท MIME อัตโนมัติ; ②ดูตัวอย่างโดยตรงในเบราว์เซอร์ผ่าน Blob URL; ③ตั้งค่านามสกุลไฟล์ตาม MIME โดยอัตโนมัติ (.png / .jpg ฯลฯ); ④แสดงข้อมูลขนาดรูปภาพ Base64 เป็นไฟล์เป็นเครื่องมือทั่วไป เหมาะสำหรับการกู้คืนและดาวน์โหลดไฟล์ไบนารีใดๆ (เช่น PDF, ZIP, เสียง ฯลฯ)
ควรทำอย่างไรหากรูปภาพแสดงไม่สมบูรณ์หลังถอดรหัส?
สาเหตุที่เป็นไปได้: ①สตริง Base64 ถูกตัด (ตรวจสอบว่าความยาวสมบูรณ์หรือไม่); ②ระบุประเภท MIME ผิด (เช่น ถอดรหัสข้อมูล PNG เป็น JPG); ③ข้อมูลดั้งเดิมเสียหายเอง คำแนะนำ: ①ยืนยันว่า Base64 ต้นทางสมบูรณ์; ②ลองสลับประเภท MIME ต่างๆ; ③ใช้เครื่องมือ Base64 Validate ตรวจสอบความถูกกฎหมาย
ขนาด Base64 ใหญ่กว่ารูปภาพต้นฉบับเท่าไหร่?
การเข้ารหัส Base64 จะทำให้ขนาดข้อมูลไบนารีดั้งเดิมเพิ่มขึ้นประมาณ 33% (3 ไบต์ → 4 อักขระ) ตัวอย่างเช่น PNG 100KB หลังเข้ารหัสจะเป็นสตริง Base64 ประมาณ 133KB ดังนั้น Base64 จึงเหมาะกับรูปภาพขนาดเล็ก (< 10KB) สำหรับรูปภาพขนาดใหญ่แนะนำให้ส่งผ่าน HTTP URL โดยตรง
รองรับภาพเวกเตอร์ SVG หรือไม่?
รองรับ SVG เป็นรูปแบบภาพเวกเตอร์ที่อาศัย XML หลังเข้ารหัส Base64 สามารถฝังโดยตรงใน HTML <img> หรือ CSS background-image หลังถอดรหัสจะถูกเรนเดอร์แบบเวกเตอร์ในเบราว์เซอร์ สามารถขยาย/ย่อได้โดยไม่สูญเสียคุณภาพ โปรดทราบว่า SVG อาจมีโค้ด JavaScript จำเป็นต้องระมัดระวังความปลอดภัย XSS เมื่อใช้งาน
จะบันทึกเป็นรูปแบบที่ระบุได้อย่างไร?
คลิกปุ่มดาวน์โหลดหลังถอดรหัส เครื่องมือจะเพิ่มนามสกุลไฟล์ที่สอดคล้องกันตามประเภท MIME ตอนถอดรหัสโดยอัตโนมัติ (image/png → .png, image/jpeg → .jpg) หากต้องการแปลงรูปแบบ (เช่น PNG → JPG) แนะนำให้ถอดรหัสก่อนแล้วใช้เครื่องมืออื่น (เช่น Canvas / ImageMagick) แปลง
รูปภาพหลังถอดรหัสเป็นสีขาวหรือเสียหาย?
สาเหตุทั่วไป: ①Base64 มีอักขระขึ้นบรรทัดใหม่หรือช่องว่างที่ไม่ได้ทำความสะอาด——ใช้เครื่องมือ Base64 Clean ประมวลผลล่วงหน้าก่อน; ②padding (=) ขาดหายไป——เครื่องมือนี้จะเติมให้สมบูรณ์โดยอัตโนมัติ; ③ประเภท MIME ไม่ตรงกับข้อมูลดั้งเดิม——ตรวจสอบ Content-Type ที่ส่งคืนจาก API ต้นทางหรือลอง MIME อื่นด้วยตนเอง; ④Base64 ต้นทางถูกตัดระหว่างการส่ง——รับสตริงที่สมบูรณ์ใหม่
รองรับรูปภาพขนาดใหญ่ (>10MB) หรือไม่?
รองรับ แต่ประสิทธิภาพการเรนเดอร์รูปภาพขนาดใหญ่มากของเบราว์เซอร์จะลดลง การถอดรหัส Base64 10MB (รูปภาพต้นฉบับประมาณ 7.5MB) มักจะลื่นไหล; เกิน 50MB อาจมีคำเตือนหน่วยความจำ คำแนะนำ: ①ใช้ base64-clean ลบช่องว่างก่อน; ②ถอดรหัสรูปภาพใหญ่เป็นบล็อก; ③ยืนยันว่าหน่วยความจำเบราว์เซอร์เพียงพอ (แนะนำหน่วยความจำว่าง 4GB+)
การแก้ไขปัญหา
รูปภาพแสดงสีขาวหลังถอดรหัส
อาจเป็นเพราะประเภท MIME ไม่ตรงกันหรือ Base64 ไม่สมบูรณ์ ตรวจสอบ: 1) ส่วนหัว Content-Type ที่ส่งคืนจาก API ต้นทาง; 2) สลับประเภท MIME ด้วยตนเองแล้วลองใหม่; 3) ยืนยันว่าสตริง Base64 สมบูรณ์ (ความยาวเป็นไปตามที่คาดไว้)
ถอดรหัสล้มเหลว InvalidCharacterError
สตริง Base64 มีอักขระผิดกฎหมาย (ช่องว่าง ขึ้นบรรทัดใหม่ ภาษาไทย ฯลฯ) ใช้เครื่องมือ Base64 Clean ลบช่องว่างและอักขระผิดกฎหมายทั้งหมดก่อน แล้วจึงแปลง
นามสกุลไฟล์รูปภาพที่ดาวน์โหลดผิด
ตรวจสอบว่าประเภท MIME ตอนถอดรหัสตรงกับรูปภาพต้นฉบับหรือไม่ เช่น หาก API ต้นทางส่งคืน image/jpeg แต่ข้อมูล Base64 จริงเป็น PNG นามสกุลหลังดาวน์โหลดจะเป็น .jpg แต่จริงๆ เป็นรูปแบบ PNG แนะนำให้ยืนยันรูปแบบดั้งเดิมจากนำหน้า MIME หรือส่วนหัว Content-Type
เบราว์เซอร์ค้างเมื่อถอดรหัสรูปภาพขนาดใหญ่
สตริง Base64 ที่เกิน 50MB อาจทำให้หน่วยความจำล้น คำแนะนำ: ①ใช้เครื่องมือ base64-clean ลบอักขระช่องว่างก่อน; ②ถอดรหัสรูปภาพใหญ่เป็นชุด (เช่น แบ่งตาม tile); ③ยืนยันว่าหน่วยความจำเบราว์เซอร์เพียงพอ (แนะนำหน่วยความจำว่าง 4GB+); ④ใช้สคริปต์ Node.js / Python ฝั่งเซิร์ฟเวอร์ประมวลผลรูปภาพขนาดใหญ่มาก
รูปภาพ SVG ไม่สามารถแสดงได้หลังถอดรหัส
SVG เป็นรูปแบบเวกเตอร์ที่อาศัย XML หลังถอดรหัสจำเป็นต้องตรวจสอบให้แน่ใจว่า: 1) ประเภท MIME ใช้ image/svg+xml; 2) SVG ต้องไม่มีอักขระพิเศษที่ไม่ได้ escape; 3) เบราว์เซอร์บางตัวมีข้อจำกัดความปลอดภัยสำหรับโค้ด JavaScript ใน SVG แนะนำให้ใช้เครื่องมือแยกวิเคราะห์ XML ตรวจสอบความถูกกฎหมายของ SVG ก่อน
อภิธานศัพท์
- Base64
- วิธีการเข้ารหัสที่แสดงข้อมูลไบนารีด้วยอักขระ ASCII 64 ตัว กำหนดใน RFC 4648 การทำงานย้อนกลับของเครื่องมือนี้: แปลงสตริง Base64 กลับเป็นไบนารีรูปภาพดั้งเดิม
- Data URL
- รูปแบบ URL อินไลน์ที่กำหนดโดย RFC 2397: data:image/<MIME>;base64,<ข้อมูล> สามารถใช้โดยตรงใน HTML img src, CSS background-image เครื่องมือนี้รู้จำและตัดนำหน้าอัตโนมัติ
- ประเภท MIME
- ประเภทสื่ออินเทอร์เน็ต เช่น image/png, image/jpeg เบราว์เซอร์ตัดสินใจตาม MIME ว่าจะแยกวิเคราะห์สตรีมไบต์เป็นรูปภาพอย่างไร
- PNG
- รูปแบบบิตแมปบีบอัดไม่สูญเสียข้อมูล รองรับช่องโปร่งใส มักใช้สำหรับไอคอน ภาพหน้าจอ รูปภาพที่ต้องเก็บรายละเอียด หลัง Base64 ขนาดประมาณ 1.33 เท่าของต้นฉบับ
- JPG/JPEG
- รูปแบบบิตแมปบีบอัดสูญเสียข้อมูล เหมาะกับรูปภาพถ่าย อัตราการบีบอัดสูงแต่ไม่รองรับโปร่งใส หลัง Base64 ขนาดประมาณ 1.33 เท่าของต้นฉบับ
- WebP
- รูปแบบภาพสมัยใหม่ที่พัฒนาโดย Google รองรับการบีบอัดสูญเสีย/ไม่สูญเสียข้อมูลและช่องโปร่งใสพร้อมกัน เล็กกว่า PNG/JPG 25-35%
- Blob (Binary Large Object)
- อ็อบเจกต์ไบนารีธรรมชาติของเบราว์เซอร์ สามารถห่อหุ้มสตรีมไบต์หลังถอดรหัส Base64 เป็น Blob URL รูปภาพเพื่อใช้ดูตัวอย่างและดาวน์โหลด
ตารางเปรียบเทียบรูปแบบภาพ 8 ชนิด
รูปแบบภาพต่างๆ มีอัลกอริทึมการบีบอัด คุณลักษณะ และสถานการณ์การใช้งานที่แตกต่างกัน
| รูปแบบ | ประเภท MIME | ประเภทการบีบอัด | รองรับโปร่งใส | สถานการณ์ทั่วไป |
|---|---|---|---|---|
PNG | image/png | ไม่สูญเสีย | ✅ | ไอคอน / ภาพหน้าจอ / Logo |
JPG | image/jpeg | สูญเสีย | ❌ | รูปถ่าย / ภาพทิวทัศน์ |
WebP | image/webp | สูญเสีย/ไม่สูญเสีย | ✅ | แนะนำสำหรับ Web สมัยใหม่ |
GIF | image/gif | ไม่สูญเสีย (256 สี) | ✅ (1-bit) | ภาพเคลื่อนไหวขนาดเล็ก / ไอคอนเรียบง่าย |
SVG | image/svg+xml | เวกเตอร์ | ✅ | Logo / ไอคอน / ภาพประกอบ |
BMP | image/bmp | ไม่มี | ตัวเลือกได้ | ภาพระบบ Windows |
AVIF | image/avif | สูญเสีย/ไม่สูญเสีย | ✅ | รูปแบบภาพรุ่นถัดไป |
ICO | image/x-icon | ไม่สูญเสีย | ✅ | favicon เว็บไซต์ |
เปรียบเทียบการโหลดรูปภาพ Data URL กับ HTTP URL
รูปภาพหลังถอดรหัสสามารถฝังโดยตรงใน HTML/CSS เป็น Data URL เปรียบเทียบกับ HTTP URL แบบดั้งเดิม
| มิติ | Data URL | HTTP URL |
|---|---|---|
| จำนวนคำขอ HTTP | 0 | 1 ครั้ง |
| การใช้แคชซ้ำ | ยาก | ง่าย (CDN / เบราว์เซอร์) |
| ขนาด | รูปต้นฉบับ + 33% | ขนาดรูปต้นฉบับ |
| ขนาดที่เหมาะสม | < 10 KB | ขนาดใดก็ได้ |
| การส่งแบบบีบอัด | ไม่ (เข้ารหัสแล้ว) | gzip / Brotli |
| ข้อจำกัด CSP | เป็นไปได้ | โดยทั่วไปอนุญาต |
| การจัดเก็บบนเซิร์ฟเวอร์ | ไม่จำเป็น | จำเป็น |
| เข้าถึงออฟไลน์ | ✅ (ระดับไฟล์) | ❌ (ต้องแคช) |
ตารางเปรียบเทียบข้อผิดพลาดทั่วไป 5 อย่างของ Base64 เป็นรูปภาพ
เมื่อพบข้อผิดพลาดในการถอดรหัส ให้ค้นหาปัญหาอย่างรวดเร็วตามตารางด้านล่าง
| อาการข้อผิดพลาด | สาเหตุที่เป็นไปได้ | วิธีแก้ไข |
|---|---|---|
| ถอดรหัสล้มเหลว: InvalidCharacterError | มีช่องว่าง ขึ้นบรรทัดใหม่ อักขระที่ไม่ใช่ Base64 | ใช้เครื่องมือ Base64 Clean ประมวลผลล่วงหน้า |
| รูปภาพแสดงสีขาว | ประเภท MIME ไม่ตรงกับข้อมูลดั้งเดิม | สลับ MIME ที่ถูกต้อง (เช่น ข้อมูล PNG ใช้ image/png) |
| รูปภาพแสดงไม่สมบูรณ์ | สตริง Base64 ถูกตัด | รับสตริง Base64 ที่สมบูรณ์ใหม่ |
| Padding แจ้งข้อผิดพลาด | URL-safe Base64 ละ padding | ใช้เครื่องมือ Base64 Padding เติม = |
| หน่วยความจำเบราว์เซอร์ล้น | รูปภาพใหญ่เกินไป (> 50MB) | ถอดรหัสเป็นบล็อกหรือใช้เครื่องมือบีบอัดรูปภาพ |
Authoritative References
- เปรียบเทียบข้อความอย่างปลอดภัย
- การแปลงเลขฐานสอง
- รหัสซีซาร์ (Caesar Cipher)
- ตัวแปลงรหัสมอร์ส
- เลขฐานสิบหก (Hex)
- วิดีโอเป็น Base64
- Base64 เป็นวิดีโอ
- แปลงรูปภาพเป็น Base64
- Base64 เป็นรูปภาพ
- แปลงข้อความเป็น Base64
- Base64 เป็นข้อความ
- ตัวตรวจสอบแฮชไฟล์
- แปลงไฟล์เป็น Base64
- Base64 เป็นไฟล์
- แปลงเสียงเป็น Base64
- Base64 เป็นเสียง
- เข้ารหัสและถอดรหัส AES
- เข้ารหัสและถอดรหัส DES
- ตัวเข้ารหัสและถอดรหัส Base32
- Base58 การเข้ารหัสและถอดรหัส
- การเข้ารหัส Base64
- ถอดรหัส Base64
- เปรียบเทียบ Base64
- แยก Base64
- รวม Base64 หลายบรรทัด
- การจัดรูปแบบ Base64
- ตรวจสอบรูปแบบ Base64
- เข้ารหัส Base64 แบบกลุ่ม
- ถอดรหัส Base64 หลายรายการ
- เครื่องมือล้าง Base64
- เครื่องมือจัดการ padding Base64
- สถิติความยาว Base64
- Base64 เป็น Hex
- ตัวแปลง Base64 DataURL
- ตัวแปลง Base64-Hex
- ตัวแปลงรหัส Base85
- สร้างและตรวจสอบ HMAC
- เครื่องมือสร้างคีย์ PBKDF2
- แฮช MD5
- แฮช SHA-256
- แฮช SHA-1
- แฮช SHA512
- ถอดรหัส ตรวจสอบ และสร้าง JWT
- เข้ารหัสและถอดรหัส HTML
- ตัวแปลงรหัส Unicode
- การเข้ารหัส URL
- URL Safe Base64
- MIME Base64
- ทำให้โค้ด Java อ่านยาก (Obfuscate)
- ทำให้โค้ด JS อ่านยาก (Obfuscate)
- ทำให้โค้ด PHP อ่านยาก (Obfuscate)
- ทำให้โค้ด Python อ่านยาก (Obfuscate)