Để chuyển đổi hình ảnh từ thẻ trang Html sang URI dữ liệu bằng javascript, trước tiên bạn cần tạo một phần tử canvas, đặt chiều rộng và chiều cao của nó bằng chiều rộng của hình ảnh, vẽ hình ảnh trên đó và cuối cùng gọi phương thức toDataURL trên đó.
Điều 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 như sau -
Ví dụ
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);
}); Đầu ra
Điều này sẽ cung cấp đầu ra -
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB