ในการแปลงรูปภาพจากแท็กหน้า Html เป็น URI ข้อมูลโดยใช้จาวาสคริปต์ ก่อนอื่นคุณต้องสร้างองค์ประกอบผ้าใบ ตั้งค่าความกว้างและความสูงให้เท่ากับรูปภาพ วาดภาพบนนั้น และสุดท้ายเรียกใช้เมธอด toDataURL
ซึ่งจะส่งคืน URI ข้อมูลที่เข้ารหัส base64 ของรูปภาพ ตัวอย่างเช่น หากคุณมีรูปภาพที่มี 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
