ตัวแปลง Base64 DataURL

Base64 แบบบริสุทธิ์
0 อักขระ

เครื่องมือออนไลน์สำหรับแปลงสองทิศทางระหว่าง Base64 ล้วนกับ DataURL พร้อมระบุชนิด MIME อัตโนมัติและลบช่องว่าง

คำแนะนำที่เกี่ยวข้อง

การเข้ารหัส Base64

ถอดรหัส Base64

รวม Base64 หลายบรรทัด

Base64 เป็นรูปภาพ

แปลงรูปภาพเป็น Base64

เครื่องมือล้าง Base64

Base64 DataURL คืออะไร?

DataURL เป็นรูปแบบ URI ที่ฝังข้อมูลไว้ใน URL โดยตรงในรูปแบบ data:[<ชนิด MIME>];base64,<ข้อมูล Base64> ช่วยให้ฝังรูปภาพ PDF ฟอนต์ และทรัพยากรขนาดเล็กอื่น ๆ เข้ากับ HTML CSS และ JavaScript ได้โดยตรงโดยไม่ต้องส่งคำขอ HTTP เพิ่ม

**Base64 ล้วน กับ DataURL:** Base64 ล้วนเป็นเพียงสตริงที่เข้ารหัสแล้ว (เช่น iVBORw0KGgo...) ส่วน DataURL เป็น URI แบบเต็มที่มีคำนำหน้า data: และชนิด MIME สามารถใช้เป็นค่าของ src, href, url() ได้โดยตรง

**จุดประสงค์ของเครื่องมือนี้:** แปลงไปมาระหว่าง «สตริง Base64 ล้วน» กับ «DataURL แบบเต็ม» — ทั้งการเพิ่มคำนำหน้า data: และชนิด MIME ให้กับ Base64 ที่มีอยู่โดยอัตโนมัติ และการดึงเฉพาะส่วน Base64 ล้วนออกจาก DataURL

**การใช้งานทั่วไป:** ① ฝังภาพพื้นหลังใน CSS; ② inline src ใน HTML <img>; ③ ฝังภาพแบบ inline ใน Markdown; ④ วางภาพลงในโปรแกรมแก้ไข rich text; ⑤ แก้ปัญหา data URI scheme

กรณีการใช้งาน

  • เพิ่มคำนำหน้า data: และชนิด MIME ให้กับ Base64 ที่มีอยู่เพื่อให้ได้ DataURL ที่ฝังใน HTML ได้โดยตรง
  • ดึงเฉพาะส่วน Base64 ล้วนออกจาก DataURL เพื่อให้ประกอบกลับหรือส่งต่อได้ง่าย
  • ตรวจสอบความครบถ้วนของ payload Base64 เมื่อดีบักทรัพยากร data: ในฝั่ง frontend
  • ระบุชนิด MIME (PNG/JPEG/PDF ฯลฯ) ของ Base64 ที่อยู่ในคลิปบอร์ดโดยอัตโนมัติ
  • เตรียม data URL สำหรับใช้กับ CSS background-image หรือ HTML <img src>
  • แปลง Base64 ของภาพเป็น DataURL ที่วางลงในโปรแกรมแก้ไข rich text ของ Markdown ได้

วิธีการใช้งาน

  1. เลือกทิศทาง: «เพิ่มส่วนหัว» (Base64 ล้วน → DataURL) หรือ «ลบส่วนหัว» (DataURL → Base64 ล้วน)
  2. วางเนื้อหาลงในกล่องทางซ้าย: โหมดเพิ่มให้วาง Base64 ล้วน โหมดลบให้วางสตริง data:...
  3. ในโหมดเพิ่มสามารถคง «ระบุอัตโนมัติ» ไว้หรือเลือกชนิดเฉพาะจากดรอปดาวน์ MIME
  4. เครื่องมือแปลงแบบเรียลไทม์ ผลลัพธ์แสดงทางขวาและสามารถคัดลอกหรือดาวน์โหลดเป็น txt ได้

คุณสมบัติ

  • แปลงสองทิศทาง: Base64 ล้วน ↔ DataURL
  • 11 ชนิด MIME: รูปภาพ เอกสาร เสียง/วิดีโอ ข้อความ
  • ระบุ MIME อัตโนมัติ: ผ่านเมจิกไบต์ของ PNG/JPEG/GIF/WEBP/PDF
  • ลบช่องว่าง: ทำความสะอาดอักขระขึ้นบรรทัดใหม่และช่องว่างโดยอัตโนมัติ
  • แปลงแบบเรียลไทม์: คำนวณใหม่อัตโนมัติหลังพิมพ์ 300 มิลลิวินาที
  • สลับทิศทางอัตโนมัติ: เมื่อเปลี่ยนทิศทาง อินพุตและเอาต์พุตจะสลับกันโดยอัตโนมัติ
  • คัดลอกคลิกเดียว: ผลลัพธ์ถูกคัดลอกไปยังคลิปบอร์ดทันที
  • ดาวน์โหลด txt: บันทึกเป็นไฟล์ dataurl-result.txt
  • รองรับทั้ง PC และมือถือ: แผงแบ่งซ้ายขวาลากได้หรือสลับแท็บ
  • ประมวลผลภายในเบราว์เซอร์: เนื้อหาไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์

Best Practices

ใช้การระบุอัตโนมัติก่อน

หากไม่แน่ใจชนิด MIME ให้คง «ระบุอัตโนมัติ» ไว้ แล้วเลือกเองเมื่อระบุไม่สำเร็จ

ระวังขีดจำกัดขนาด

DataURL มีขีด 2–4 MB ในเบราว์เซอร์ ไฟล์ขนาดใหญ่ควรอ้างอิงด้วย URL แทนการฝัง

การลบอักขระที่ไม่จำเป็น

Base64 ที่วางมักมีขึ้นบรรทัดใหม่ปนอยู่ เครื่องมือจะลบให้โดยอัตโนมัติ หากต้องการความเข้มงวดกว่านี้ให้ใช้ «ล้าง Base64» ก่อน

ตรวจสอบเปรียบเทียบ

หลังการแปลง ใช้ «ตรวจสอบ Base64» หรือเครื่องมือ dev tools ของเบราว์เซอร์ เพื่อยืนยันว่า DataURL โหลดได้ตามปกติ

ตรวจหลังคัดลอก

หลังวางลงในตำแหน่งเป้าหมาย ให้ตรวจในคอนโซลเบราว์เซอร์ว่าผลลัพธ์การถอดรหัสตรงตามคาดหรือไม่

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

โหมดเพิ่มเปิดใช้การระบุอัตโนมัติอยู่แล้วหรือไม่?

ใช่ เครื่องมือนี้เปิดการระบุอัตโนมัติไว้เป็นค่าเริ่มต้น: จะตรวจไบต์แรก ๆ ของ Base64 (เมจิกไบต์) เพื่อระบุรูปแบบ PNG, JPEG, GIF, WEBP หรือ PDF หากต้องการชนิด MIME อื่น (เช่น application/json, video/mp4) สามารถเลือกเองจากดรอปดาวน์ได้

ถ้าอินพุตมีคำนำหน้า data: อยู่แล้วจะเป็นอย่างไร?

ในโหมดเพิ่ม หากอินพุตขึ้นต้นด้วย data: เครื่องมือจะคืนค่าเดิมโดยไม่เพิ่มคำนำหน้าซ้ำ ในโหมดลบ หากอินพุตไม่อยู่ในรูปแบบ DataURL เครื่องมือจะลบอักขระช่องว่างแล้วคืนค่า Base64 ล้วน

ถ้าการระบุอัตโนมัติล้มเหลวจะเป็นอย่างไร?

ถ้า Base64 ไม่ตรงกับเมจิกไบต์ของ PNG/JPEG/GIF/WEBP/PDF ใด ๆ เลย การระบุอัตโนมัติจะ fallback ไปยัง application/octet-stream แนะนำให้เลือกชนิด MIME ที่ต้องการด้วยตนเอง

รองรับชนิด MIME ใดบ้าง?

image/png, image/jpeg, image/gif, image/webp, image/svg+xml, application/pdf, application/json, text/plain, text/html, audio/mpeg, video/mp4 รวมทั้งหมด 11 ชนิดที่ใช้บ่อย

DataURL มีข้อจำกัดด้านขนาดในเบราว์เซอร์หรือไม่?

มี เบราว์เซอร์ส่วนใหญ่จำกัดความยาวรวมของ DataURL (ประมาณ 2–4 MB ขึ้นกับเบราว์เซอร์) หากเกินขีดจำกัดจะโหลดทรัพยากรไม่สำเร็จ สำหรับไฟล์ขนาดใหญ่ควรใช้การอ้างอิงด้วย URL ปกติ

DataURL สามารถใช้ที่ใดได้บ้าง?

ใช้ใน HTML <img src>, CSS url(), การดาวน์โหลดผ่าน <a href>, JavaScript fetch, ไวยากรณ์รูปภาพใน Markdown, ทรัพยากรฝังในข้อมูล JSON เป็นต้น

ขึ้นบรรทัดใหม่และช่องว่างใน Base64 ถูกลบอัตโนมัติหรือไม่?

ลบ ในโหมดเพิ่มจะลบการขึ้นบรรทัดใหม่และช่องว่างก่อนเพิ่มคำนำหน้า ส่วนโหมดลบก็จะลบช่องว่างหลังดึงออกจาก DataURL เช่นกัน

เมื่อสลับทิศทาง อินพุตจะเปลี่ยนหรือไม่?

เมื่อสลับทิศทาง เครื่องมือจะนำเอาต์พุตปัจจุบันมาเป็นอินพุตใหม่โดยอัตโนมัติ ทำให้ทำงานต่อเนื่องได้สะดวก

เนื้อหาถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ การแปลงทั้งหมดทำในเบราว์เซอร์ อินพุตและเอาต์พุตไม่ได้ออกจากอุปกรณ์ของคุณ

อภิธานศัพท์

DataURL
รูปแบบ URI ข้อมูลตาม RFC 2397 รูปแบบ data:[<mime>];base64,<data> ใช้เป็นค่าของ src, href, url() ฯลฯ ได้โดยตรง
ชนิด MIME
ตัวระบุประเภทสื่อ เช่น image/png, application/pdf เครื่องมือนี้รองรับ 11 ชนิด MIME ที่ใช้บ่อยและสามารถระบุอัตโนมัติได้
เมจิกไบต์
ไบต์คงที่ที่จุดเริ่มต้นของไฟล์เพื่อใช้ระบุชนิดของไฟล์ เครื่องมือตรวจสอบ PNG/JPEG/GIF/WEBP/PDF และอื่น ๆ ด้วยเมจิกไบต์
Base64
วิธีเข้ารหัสข้อมูลไบนารีโดยใช้อักขระที่พิมพ์ได้ 64 ตัว ส่วน payload ของ DataURL คือ Base64
Data URI Scheme
โปรโตคอล URI data: ตาม RFC 2397 — ชื่อทางการของสเปก DataURL

Authoritative References