ตัวแปลง Base64 เป็น PNG

Base64 PNG มาจากไหน

PNG เป็นรูปแบบที่คุณน่าจะพบในรูป Base64 บ่อยที่สุด การเรียก canvas.toDataURL() โดยไม่ส่งอาร์กิวเมนต์จะได้ data URI ของ PNG เครื่องมือควบคุมเบราว์เซอร์อัตโนมัติก็ส่งภาพหน้าจอกลับมาเป็น Base64 PNG เช่น page.screenshot({ encoding: 'base64' }) ใน Puppeteer หรือ get_screenshot_as_base64() ใน Selenium ส่วนตัวเรนเดอร์แผนภูมิ ตัวสร้างคิวอาร์โค้ด และ API สร้างรูปภาพมักส่งรูปภาพกลับมาเป็นฟิลด์ Base64 ภายใน JSON

สตริง PNG สังเกตได้ง่าย เพราะขึ้นต้นด้วย iVBORw0KGgo เสมอ ซึ่งเป็นผลการเข้ารหัสลายเซ็น PNG ขนาด 8 ไบต์ที่เริ่มด้วย 89 50 4E 47 ตามด้วย AAAANSUhEUg ซึ่งเป็นจุดเริ่มต้นของชังก์ IHDR ที่เก็บความกว้างและความสูงของภาพ

สตริงที่คัดลอกมาจาก JSON ควรตรวจดูก่อนสักครู่ ตัวอย่างเช่น json_encode ของ PHP จะหลีกเครื่องหมายทับโดยค่าเริ่มต้น PNG จาก API ที่เขียนด้วย PHP จึงอาจมีลำดับ \/ ติดมา ให้แทนที่ด้วย / และลบเครื่องหมายคำพูดที่ครอบอยู่ออกก่อนวาง

ทำไมจึงควรบันทึกเป็น PNG

PNG บีบอัดโดยไม่สูญเสียรายละเอียดใด ๆ และเก็บช่องอัลฟาไว้เต็มรูปแบบ เงาที่นุ่มนวลและขอบที่ลบรอยหยักแล้วจึงยังคงสมบูรณ์ ทำให้เป็นตัวเลือกที่เหมาะกับภาพหน้าจอ องค์ประกอบของส่วนติดต่อผู้ใช้ แผนภาพ และภาพที่มีตัวอักษร สำหรับภาพถ่าย JPG หรือ WebP จะได้ไฟล์ที่เล็กกว่ามาก

การแปลง JPEG หรือ WebP เป็น PNG จะคงภาพตามที่เห็นบนหน้าจอไว้ทุกประการ แต่ไม่สามารถเรียกคืนรายละเอียดที่การบีบอัดแบบสูญเสียข้อมูลตัดทิ้งไปแล้ว และ PNG ที่ได้มักใหญ่กว่าไฟล์ต้นทาง

บันทึก Base64 PNG ด้วยโค้ด

# Python
import base64
with open('screenshot.png', 'wb') as f:
    f.write(base64.b64decode(b64_string))

// เบราว์เซอร์: แปลง data URI เป็น Blob โดยไม่ต้องถอดรหัสเอง
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);

ต้องการแปลงในทิศทางกลับกันหรือไม่ แปลง PNG เป็น Base64 จะเข้ารหัสไฟล์เป็นสตริงหรือ data URI