Base64 是一种基于64个 ASCII 字符来表示二进制数据的表示方法。
Base64 将8比特位为一个单元的字节数据拆分为以6个比特位为一个单元的二进制片段，每6个比特位单元对应Base64索引表中的一个字符，这样最终构成一个超过编码前字节数据33%的字符串。
Base64 中64个可打印字符包括字母A-Z、a-z、数字0-9，此外还有两个字符为+和/，这样构成了共有64字符的Base64索引表：
Base64 Encoding/Decoding · 开发者工具箱
以下是将字符串"Man"转换成Base64字符串的过程：
Base64可以用来表示图片、音频、视频等二进制数据。在前端工程化过程中，经常会把二进制JPG/PNG图片转化为 base64 的 Data URI，用以减少 HTTP 请求次数。
JavaScript中，有多种方式可以将图片转换成base64字符串。
FileReader 方法
通过 XMLHttpRequest 以blob格式请求图像，图像数据返回成功之后， 使用 FileReader API (readAsDataURL()) 将其转换为 dataURL：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
console.log('RESULT:', dataUrl)
})
|
以下代码发送请求部分也可以使用 fetch API 接口实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
.then(dataUrl => {
console.log('RESULT:', dataUrl)
})
|
这种方式的好处是支持的格式比较多，缺点就是 FileReader API 的兼容性差一点，有部分手机浏览器不支持。
Canvas 方法
构建一个Image对象，用以加载图片数据。然后通过Canvas的drawImage方法将图片绘制到Canvas上，最后通过Canvas的toDataURL方法将图片转换为base64字符串。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function toDataURL(src, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
toDataURL(
'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
function(dataUrl) {
console.log('RESULT:', dataUrl)
}
)
|
这种方式的好处是兼容性好，缺点是只支持图片格式。
本地图片转换
如果是本地图片，可以使用 FileReader API 的 readAsDataURL() 方法将其转换为 dataURL。
当然，需要有一个文件上传按钮。
1
2
3
4
5
6
7
8
|
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
|
1
|
<input type="file" onchange="encodeImageFileAsURL(this)" />
|
参考资料
