原来浏览器原生支持JS Base64编码解码
转载来源:https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/
一、基础不牢,选型糟糕
糟糕的技术选型往往源自自身技术广度不足。
就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js。
使用很简单,浏览器引入该JS文件,然后Base64编码这样:
Base64.encode('zhangxinxu');
// 返回:'emhhbmd4aW54dQ=='
解码就调用decode
方法,如下:
Base64.decode('emhhbmd4aW54dQ==');
// 返回:'zhangxinxu'
数据准确,功能良好。当时弄完还洋洋得意,以为是个完美的解决。
结果,今天发现,尼玛原来浏览器很早就支持了JS Base64加密解密,而上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡!根本就不是一个好的技术选型。
由于技术广度掌握不足,或者说JS基础掌握不牢,导致浪费了大把时间去找Base64的JS语言库,学习其API用法,换来一个冗余完全不需要加载的JS,现在来看,真是个糟糕的技术选型。
二、原生atob和btoa方法
实际上,从IE10+浏览器开始,所有浏览器就原生提供了Base64编码解码方法,不仅可以用于浏览器环境,Service Worker环境也可以使用。
方法名就是atob
和btoa
,具体语法如下:
1. Base64解码
语法为(浏览器中):
var decodedData = window.atob(encodedData);
或者(浏览器或js Worker线程中):
var decodedData = self.atob(encodedData);
例如:
window.atob('emhhbmd4aW54dQ==');
// 返回:'zhangxinxu'
眼见为实,您可以狠狠地点击这里:window.atob解码Base64字符demo
结果如下图:
记住atobatob
这个方法名称乍一看,很奇怪,不知道这个单词什么意思。我们可以理解为 A to B,也就是从A到B。这里的B指的就是Base64吗?哈哈哈,恭喜你!猜错了!A指的才是Base64,反的,B才是普通字符,普通意思就是low,俗称low B。所以我们这么记忆,Low B,Low B,B表示很Low的普通字符,A才是Base64,和首字母对应关系是反的。
因此,atob表示Base64字符to普通字符,也就是Base64解码。
2. Base64编码
语法为(浏览器中):
var encodedData = window.btoa(stringToEncode);
或者(浏览器或js Worker线程中):
var encodedData = self.btoa(stringToEncode);
例如:
window.btoa('zhangxinxu');
// 返回:'emhhbmd4aW54dQ=='
眼见为实,您可以狠狠地点击这里:window.btoa编码字符为Base64 demo
结果如下图:
记住btoa方法btoa
这个方法名称乍一看,很奇怪,不知道这个单词什么意思。我们可以理解为 B to A,也就是从B到A。那B指什么,A指什么呢?和atob
方法一样,B指的是low B普通字符串,A指的是Base64字符。
因此,btoa
方法表示low B普通字符to Base64字符,也就是Base64编码。
补充于2018-08-09
有人提到中文Base64数据转换会有报错问题。
错误如下:
The string to be encoded contains characters outside of the Latin1 range
雾霜月同学提出了解决方法,就是中文先encode转码和decode编码:
window.btoa(window.encodeURIComponent('嘻嘻哈哈哈哈啦啦啦啦'));
window.decodeURIComponent(window.atob('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2'));
我自己搜索了下,可以试试下面这样:
btoa(unescape(encodeURIComponent(str)))
我用SVG代码测试是OK的。
三、IE8/IE9的polyfill
当下,仍有不少PC项目还需要兼容IE9,所以,我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。
ployfill JS脚本戳这里,或者直接右键这里下载源文件!
实际使用,我们可以借助IE条件注释无缝对接。
也就是HTML中嵌入下面一段代码:
<!--[if IE]>
<script src="./base64-polyfill.js"></script>
<![endif]-->
[if IE]
表示所有IE浏览器,由于IE10+浏览器已经放弃了著名的IE条件注释的支持,Chrome等浏览器本身就不支持这个IE私有语法,因此,很天然的,上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8,IE9浏览器引入ployfill,于是正好完美衔接上。
也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释,不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js,使浏览器也支持window.btoa
和window.atob
这个语法。
眼见为实,您可以狠狠地点击这里:btoa/atob Base64编码解码polyfill demo
在Chrome浏览器下,可以看到没有polyfill相关JS的加载:
而IE8原生不支持atob和btoa方法的浏览器也正常编码解码Base64字符了,如下截图:
四、任意文件Base64编码
借助FileReader
对象和readAsDataURL
方法,我们可以把任意的文件转换为Base64 Data-URI。假设我们的文件对象是file
,则转换的JavaScript代码如下:
var reader = new FileReader();
reader.onload = function(e) {
// e.target.result就是该文件的完整Base64 Data-URI
};
reader.readAsDataURL(file);
基于此原理,我特意做了个简易小工具,可以得到任意文件的Base64 Data-URI,工具戳这里:base64.html
把对应的文件拖到工具页面任意位置即可。
例如一个只有’zhangxinxu’字符内容的txt文本拖进去可以得到:
可以看到文件的MIME type也自动识别出来了。然后base64,
后面的关键内容数据会发现和执行btoa('zhangxinxu')
结果一模一样,都是'emhhbmd4aW54dQ=='
,肯定必须要一样,不然我反而会怀疑自己哪里是不是弄错了。
此工具我用得很频繁,SVG转Base64,小尺寸图片转Base64,Woff字体转Base64,都是文件往里面一拖就搞定了,简单快捷。
此工具也是IE10+支持。
五、结束语
这两天看到一个新闻,说今年北半球很热:
近日,持续极端高温天气袭击整个北半球。瑞典北部北极圈内的温度一度达到30℃,10余起由高温导致的森林大火烧入北极圈;西伯利亚北部地区,气温也在本月初一度达到32℃,而往年同期,这一地区的平均温度只有10℃;日本继暴雨袭击后又迎热浪考验,高温致死案例频发;欧洲航天局近日公布卫星图片,丹麦西兰岛一处农田去年7月时还是遍地绿色,如今已呈“烤焦”的棕黄色……
加上看到不少人说今年东北很热,东北水库都干了,我就意识到,美的和格力的股票可以买起来了,2季度,3季度财报肯定会很好,因为天一热,买空调的人就会多。
最后,再分享个有技术含量的关于Low B的冷笑话——
一只小蜜蜂啊,飞到花丛中啊,飞呀飞呀,越来越高呀,然后对着下面小蜜蜂说了句:你个low bee!【捂脸】
/**
* @description base64编码方法
* @param val 需要编码的字符串
* @return 返回编码好的base64字符串
* 中文进行编码时,需要使用base64Encode(encodeURIComponent(a))
*/
function base64Encode(val){
var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
val=encodeURIComponent(val);
//把字符串转换为字符数组
var strArr = val.split('');
//装入结果的数组
var result = [];
//每个字符的ascii码
var asciiCode;
//上一个字符的ascii码
var prevAsciiCode;
var mod;
//未填充之前的数组与3的模
var preMod = strArr.length % 3;
//使字符数组组成三个一组
if(preMod == 1){
strArr.push(null);
strArr.push(null);
}
if(preMod == 2) strArr.push(null);
//遍历整个数组,寻找每个字符的ascii码
for(var index in strArr){
if(!strArr[index]){
asciiCode = 0;
}
else{
asciiCode = strArr[index].charCodeAt();
}
//位于一组当中的第几个字符
mod = index % 3;
switch(mod){
case 0:
//往右移2位
result.push(base64hash[asciiCode >> 2]);
break;
case 1:
//上一个ascii码往左移4位与现在的ascii码往右移四位做或操作
result.push(base64hash[(prevAsciiCode & 3) << 4 | asciiCode >> 4]);
break;
case 2:
//假设当前组的ascii为:01000111,00000011,00000000
//2表示当前索引位于第三个,第二个ascii码和15相与,获得低四位的值,右移两位后再从第三个ascii获取高二位作为新6位数的低二位
result.push(base64hash[(prevAsciiCode & 15) << 2 | asciiCode >> 6]);
//与2的6次方减1相与,获得低6位的值
result.push(base64hash[asciiCode & 63]);
break
}
prevAsciiCode = asciiCode
}
//处理异常
if(preMod == 1) {
result.splice(result.length - 2,2);
result.push('==');
}
else if(preMod == 2) {
result.pop();
result.push('=');
}
return result.join('');
}
/**
* Base64译码
* @param val base编码后的字符串
* @returns {string} 原字符串
*/
function base64Decode(val){
var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
//把字符串转换为字符数组
var strArr = val.split('');
//装入结果的数组
var result = [];
var preCode;
var code;
//余数,1-3
var n;
for(var i in strArr){
n=i%4;
code=base64hash.indexOf(strArr[i]);
switch(n){
case 0:
preCode=base64hash.indexOf(strArr[i]);
break;
case 1:
result.push(String.fromCharCode(preCode<<2|(code&48)>>4));
break;
case 2:
result.push(String.fromCharCode((preCode&15)<<4 |(code&60)>>2));
break;
case 3:
result.push(String.fromCharCode(((preCode&3)<<6)|code));
break;
}
preCode=code;
}
return decodeURIComponent(result.join(''));
}