一、Base64简介
Base64是一种将二进制数据转换为ASCII字符的编码方式。这个编码方式由美国在线公司开发，在电子邮件中广泛使用，因为很多邮件系统只支持ASCII字符。
Base64可以将任意长度的二进制数据编码成纯文本，只包含大小写字母、数字、”+”、”/”、”=”等字符，不包含其他特殊字符。因此可以通过邮件等传递文本方式发送二进制数据。
例如，将字符串”hello”用Base64编码后得到的字符串为”aGVsbG8=”。通过Base64编码可以将二进制文件转换为可以直接嵌入到HTML、CSS中的文本格式。其中应用最广泛的即为将图片文件转换为Base64编码的方式。
二、将图片转换为Base64编码
将图片转换成Base64编码非常简单，只需调用HTML5中提供的FileReader类，使用readAsDataURL()方法读取图片数据，并将其转化为Base64格式。
function readPicture(file){
let reader = new FileReader();
reader.onload = function(event){
let base64String = event.target.result;
console.log(base64String);
}
reader.readAsDataURL(file);
}
调用readPicture()方法，传入一个图片文件即可将图片转换为Base64编码格式。
三、将Base64编码转换为图片
将Base64编码转换为图片同样非常简单，只需要创建一个Image对象，并将Base64编码赋值给其src属性即可。以下是一个示例代码:
let img = new Image(); img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......'; document.body.appendChild(img);
以上代码可将Base64编码的图片添加到当前页面。
四、Base64编码优缺点
将图片转换为Base64编码，可以将图片直接插入HTML代码中，使得图片显示的更为方便，而且在某些场景中避免了HTTP的请求延迟。但同时也有以下缺点：
- Base64编码会使图片文件增大33%，在一些网络流量比较宝贵的场景有可能会影响用户体验。
- Base64编码的图片无法进行缓存，每次页面加载都要重新加载图片，而且在图片较多的情况下对性能也会有影响。
- Base64编码的字符串太长，在嵌入HTML页面或传输过程中，可能会导致数据传输时间变长。
因此，对于需要传输或者特别关注性能的应用，建议使用图片URL或者雪碧图等方式进行优化处理。
原创文章，作者：CZOCL，如若转载，请注明出处：https://www.506064.com/n/329035.html
微信扫一扫 
支付宝扫一扫 