การแปลงรูปภาพเป็น Base64 Data URL ด้วย JavaScript

เพื่อแปลงรูปภาพจากแท็ก HTML ให้เป็น Data URI โดยใช้ JavaScript คุณต้องสร้าง canvas element กำหนดความกว้างและความสูงเท่ากับรูปภาพ วาดรูปภาพลงบน canvas และสุดท้ายเรียกเมธอด toDataURL() บน canvas นั้น

วิธีนี้จะคืนค่า Data URI ที่เข้ารหัสเป็น Base64 ของรูปภาพ ตัวอย่างเช่น หากคุณมีรูปภาพที่มี id เป็น my-image คุณสามารถใช้โค้ดดังนี้

ตัวอย่าง

function getDataUrl(img) {    // สร้าง canvas    const canvas = document.createElement('canvas');    const ctx = canvas.getContext('2d');    // กำหนดความกว้างและความสูง    canvas.width = img.width;    canvas.height = img.height;    // วาดรูปภาพ    ctx.drawImage(img, 0, 0);    return canvas.toDataURL('image/jpeg'); } // เลือกรูปภาพ const img = document.querySelector('#my-image'); img.addEventListener('load', function (event) {    const dataUrl = getDataUrl(event.currentTarget);    console.log(dataUrl); });

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB