home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

แปลง Image เป็น Data URI ด้วย JavaScript

แปลง image จาก HTML tag เป็น data URI ด้วย JavaScript: สร้าง canvas element, กำหนด width/height เท่ากับ image, draw image บน canvas, เรียก toDataURL method

จะได้ base64 encoded data URI ของ image เช่น image id my-image

ตัวอย่าง

function getDataUrl(img) {    // Create canvas    const canvas = document.createElement('canvas');    const ctx = canvas.getContext('2d');    // Set width and height    canvas.width = img.width;    canvas.height = img.height;    // Draw the image    ctx.drawImage(img, 0, 0);    return canvas.toDataURL('image/jpeg'); } // Select the image const img = document.querySelector('#my-image'); img.addEventListener('load', function (event) {    const dataUrl = getDataUrl(event.currentTarget);    console.log(dataUrl); });

ผลลัพธ์

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB