JavaScript 根据 url 转换图像(base64)

有时,我们需要根据图片的地址将图片转化为 base64 形式的字符串,然后将转换后的 base64 提交到后台。下面代码演示了如何根据图片的 url 来将其转换成 base64。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function url2base64(url, callback) {
const img = new Image();
img.src = `${url}?v=${Math.random()}`;
img.setAttribute('crossOrigin', 'Anonymous');
img.onload = function() {
const canvas = document.createElement('canvas');
const width = img.width;
const height = img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(img, 0, 0, width, height);
const dataURL = canvas.toDataURL('image/jpeg');
typeof callback === 'function' && callback(dataURL);
};
}

使用方法:

1
2
3
4
5
const url = 'https://www.baidu.com/img/bd_logo1.png';
url2base64(url, base64 => {
console.log(base64);
// expected output: 图像的 base64 编码
});