Base64是如何进行的

开始

还记得以前产品同窗给我发了段代码，要我看看，并且最近他一直在催我找工做，相必这也是和jd相关了。遂思考前端的加密方式：

1. 自行加密。这种没代码就别考虑了
2. Base64。嗯~可以加解密
3. MD5。虽然有爆出能解密了，但我仍是以为怎么可能[黑人问号脸]
4. RSA。对称加密稍微了解一下，没私钥那也gg...

总的来讲，给前端能看懂的就Base64了。So，百度搜了下Base64，果真第一个就是能用的工具，嘿嘿嘿~成功装了波13

结束

So，结束了吗，怎么可能？首先来吐几个槽点：

1. 做为一个专业的前端开发，居然还要找Base64网站？
2. 做为一个开发，do you know Base64?

咳咳咳~下面开始装13

Base64

关于它的详细信息，口水说没了我均可能讲不清楚，这波自行维基。

简单来讲，有规律地把三个字符变四个，不够的填上=号。固然，这四个字符也有规定：A-Z、a-z、0-九、+、/，总共64个，没毛病

好的，如今重点是变戏法（3 => 4）：

1. 计算机识别的只有二进制
2. Base64字符串中最小index为63，转换成二进制为111111，最小为6位
3. 三、四、6最小公倍数为24

说的看似无关，其实步步紧要。来看一张转换图

被安排的明明白白~[笑哭]。仍是有点儿晕，看栗子

ok，差很少也知道它的转化原理了。可是，"talk is cheap, show me the code"。

固然了，这还不简单，写个循环就够了：

1. 每加3一循环，里面先转ASCII码，变成二进制，保证其为8位，再用+号拼接...
2. 而后再分别取6位，转成十进制，变成Base64字符，拼接OK

pia，pia，pia~打脸，再这样人人都成产(gong)品(cheng)经理(shi)了。看起来没毛病，我就是这么想的了，但是看完github上star最多的js-base64项目后，发现脸很肿。。。

代码

喜闻乐见的代码段，这里只是js-base64的简化版，有兴趣的老铁能够去github上看。首先准备点知识：

// 按位操做符 & | >>> <<，可参考MDN上文档
// &，只有两个位都为1才得1
0010 & 1111; // 0010
// |，至少有个1能得1
0010 | 1111; // 1111
// <<，左移，右侧填0
0010 << 2; // 1000
// >>>，无符号右移，右侧丢弃，左侧填0
0010 >>> 2; // 0000
复制代码

从核心开始，三转四的粗略版：

// Base64字符串
const base64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
// 原字符串
const word3 = 'Tao';
const len = word3.length
// 1. 第一个字符ASCII的二进制右移16位，变成了24位二进制
// 2. 第二个右移8位
// 3, 三个二进制按位或，把后两个二进制填到第一个。这正是精彩之处！
// 其实我第一次看时，当作了逻辑或，一直纳闷儿它怎么处理三个字符的，hah
const bit24 = word3.charCodeAt(0) << 16
            | (len > 1 ? word3.charCodeAt(1) << 8 : 0)
            | (len > 2 ? word3.charCodeAt(2) : 0);

const word4Array = [
    base64.charAt(bit24 >>> 18),
    // & 63，保证取得后6位二进制，由于前面都为0，按位与掉了
    base64.charAt((bit24 >>> 12) & 63),
    len === 1 ? '=' : base64.charAt((bit24 >>> 6) & 63),
    len <= 2 ? '=' : base64.charAt(bit24 & 63),
];

console.log(word4Array.join('')); // 加密字符串：VGRU
复制代码

反过来解码亦然，不过有几个注意点：

1. 二进制的移动正好相反
2. 为保证取后8位，应该& 255，由于255.toString(2) === '11111111'，8位

浏览器的方法

上面只是字符转Base64，还有图片转呢？这个我不知道，等各路大神解答[笑哭]...

固然，浏览器里提供的方法傻瓜式调用仍是能够的。使用FileReader API，例如：

const file = document.querySelector('[type="file"]').files[0];
const reader = new FileReader();

reader.readAsDataURL(file);
reader.onload = () => console.log(reader.result);
复制代码

转图片更简单，直接img.src = 'data:image/*;base64,'+ str便可。

转字符也没问题，现代浏览器的两方法：

1. window.atob，解码
2. window.btoa，编码

Suprise the mother fuck，说了半天原来浏览器都有。全都是安排~

附上一张兼容性图：

彻底能用了，老铁。

参考连接

Base64维基：en.wikipedia.org/wiki/Base64

js-base64项目：github.com/dankogai/js…

ps：项目做者好像是台湾同胞，看到readme里繁体字了。不过道听途说国家要收复台湾了 ，就在几年以内，搞很差过个2-3年要打仗了....