Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

แปลงรูปภาพเป็น URI ข้อมูลด้วย JavaScript


ในการแปลงรูปภาพจากแท็กหน้า 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