JavaScript将图片转换成Base64字符串的几种方法
Base64 是一种基于64个 ASCII 字符来表示二进制数据的表示方法。
Base64 将8比特位为一个单元的字节数据拆分为以6个比特位为一个单元的二进制片段，每6个比特位单元对应Base64索引表中的一个字符，这样最终构成一个超过编码前字节数据33%的字符串。
Base64 中64个可打印字符包括字母A-Z、a-z、数字0-9，此外还有两个字符为+和/，这样构成了共有64字符的Base64索引表：
Base64 Encoding/Decoding · 开发者工具箱[1]
以下是将字符串"Man"转换成Base64字符串的过程：
Base64可以用来表示图片、音频、视频等二进制数据。在前端工程化过程中，经常会把二进制JPG/PNG图片转化为 base64 的 Data URI，用以减少 HTTP 请求次数。
JavaScript中，有多种方式可以将图片转换成base64字符串。
FileReader 方法
Load the image as blob via XMLHttpRequest[2] and use the FileReader API[3] (readAsDataURL()[4]) to convert it to a dataURL[5]:
通过 XMLHttpRequest 以blob格式请求图像，图像数据返回成功之后， 使用 FileReader API[6] (readAsDataURL()[7]) 将其转换为 dataURL：
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[8] 接口实现：
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字符串。
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[9] 的 readAsDataURL()[10] 方法将其转换为 dataURL。
当然，需要有一个文件上传按钮。
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}<input type="file" onchange="encodeImageFileAsURL(this)" />参考资料
• How can I convert an image into Base64 string using JavaScript? - Stack Overflow[11]
往期推荐
欢迎关注我的公众号“码中人”，原创技术文章第一时间推送。
引用链接
[1] Base64 Encoding/Decoding · 开发者工具箱: https://devtool.tech/base64[2] XMLHttpRequest: https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest[3] FileReader API: https://developer.mozilla.org/de/docs/Web/API/FileReader[4] readAsDataURL(): https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL[5] dataURL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs[6] FileReader API: https://developer.mozilla.org/de/docs/Web/API/FileReader[7] readAsDataURL(): https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL[8] fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch[9] FileReader API: https://developer.mozilla.org/de/docs/Web/API/FileReader[10] readAsDataURL(): https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL[11] How can I convert an image into Base64 string using JavaScript? - Stack Overflow: https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript