Chuyển Image thành Data URI với JavaScript

Chuyển <img> element thành base64 Data URI qua canvas.

Implementation

function getDataUrl(img) {
  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'); // hoặc 'image/png'
}

// Usage
const img = document.querySelector('#my-image');
img.addEventListener('load', e => {
  const dataUrl = getDataUrl(e.currentTarget);
  console.log(dataUrl); // "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
});

Lưu ý

• Phải chờ load event — ảnh chưa load thì width/height = 0.
• Cross-origin image: cần crossorigin="anonymous" trên <img> và server CORS header, nếu không toDataURL() throw SecurityError.
• Data URL size ~ 4/3 kích thước binary — không dùng cho ảnh lớn.