Chuyển đổi hình ảnh thành URL dữ liệu Base64 bằng JavaScript

Để chuyển đổi hình ảnh từ thẻ HTML thành URI dữ liệu (data URI) bằng JavaScript, bạn cần tạo một phần tử canvas, đặt chiều rộng và chiều cao bằng với hình ảnh, vẽ hình ảnh lên canvas và cuối cùng gọi phương thức toDataURL() trên canvas đó.

Phương thức này sẽ trả về URI dữ liệu được mã hóa Base64 của hình ảnh. Ví dụ, nếu bạn có một hình ảnh với id my-image, bạn có thể sử dụng mã sau:

Ví dụ

function getDataUrl(img) {
  // Tạo canvas
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // Đặt chiều rộng và chiều cao
  canvas.width = img.width;
  canvas.height = img.height;
  // Vẽ hình ảnh
  ctx.drawImage(img, 0, 0);
  return canvas.toDataURL('image/jpeg');
}

// Chọn hình ảnh
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
  const dataUrl = getDataUrl(event.currentTarget);
  console.log(dataUrl);
});

Kết quả

Đoạn mã trên sẽ cho kết quả như sau:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB