แปลงรูปภาพเป็น Blob ใน JavaScript ด้วย fetch()

การแปลงรูปภาพ (หรือทรัพยากรอื่นๆ) เป็น Blob ทำได้ง่ายด้วย fetch() แล้วตามด้วย response.blob() วิธีนี้เหมาะสำหรับดาวน์โหลดรูป แก้ไข แล้วอัปโหลด หรือสร้างไฟล์ให้ผู้ใช้ดาวน์โหลด

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>แปลงรูปภาพเป็น Blob</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>แปลงรูปภาพเป็น Blob ใน JavaScript</h1>
  <div class="sample">
    <img src="https://picsum.photos/id/222/300/300.jpg" alt="รูปตัวอย่าง" />
  </div>
  <button class="Btn">แปลงเป็น Blob</button>
  <div class="result"></div>
  <h3>กดปุ่มเพื่อดึงรูปภาพและแปลงเป็น Blob</h3>
  <script>
    const btnEle = document.querySelector(".Btn");
    const resEle = document.querySelector(".result");
    btnEle.addEventListener("click", () => {
      fetch("https://picsum.photos/id/222/300/300.jpg")
        .then(response => {
          if (!response.ok) throw new Error("Network error: " + response.status);
          return response.blob();
        })
        .then(blob => {
          resEle.innerHTML = "ขนาด Blob = " + blob.size + " ไบต์<br>";
          resEle.innerHTML += "ประเภท MIME = " + blob.type + "<br>";
          // สร้าง Object URL เพื่อแสดงผลหรือดาวน์โหลด
          const url = URL.createObjectURL(blob);
          const img = document.createElement("img");
          img.src = url;
          img.alt = "Blob preview";
          resEle.appendChild(img);
          // ควร revokeObjectURL เมื่อไม่ใช้แล้ว
          // setTimeout(() => URL.revokeObjectURL(url), 10000);
        })
        .catch(err => {
          resEle.innerHTML = "เกิดข้อผิดพลาด: " + err.message;
        });
    });
  </script>
</body>
</html>

ผลลัพธ์

เมื่อกดปุ่ม "แปลงเป็น Blob":

กรณีการใช้งานทั่วไป

• ดาวน์โหลดไฟล์: สร้าง <a href="blob-url" download="filename"> แล้วคลิกทางโปรแกรม
• แก้ไขรูปภาพ: วาดลง <canvas> แล้ว canvas.toBlob()
• อัปโหลด: ใช้ FormData.append('file', blob, 'filename')
• Cache: เก็บ Blob ใน IndexedDB สำหรับออฟไลน์

ข้อควรระวัง

• CORS: เซิร์ฟเวอร์ต้นทางต้องอนุญาต (Access-Control-Allow-Origin)
• หน่วยความจำ: Blob ใหญ่ๆ อาจกิน RAM มาก ควร revokeObjectURL() ทิ้ง
• ประเภท MIME: blob.type มาจาก Header Content-Type ของเซิร์ฟเวอร์