理解Base64编码及实现编解码Base64

-前言-

上前几篇博客做图集分解的时候Image对象生成的时候，不是使用的直接用二进制数据生成的图像数据，而是使用的转化后的base64数据来生成的。本片博客就让我们来了解下Base64及写一个编解码器。

-正文-

base64编码格式是一种可以由文本编辑器打开查看的编码格式，与二进制不同，base64之所有称为64，也是因为我们要映射的二进制数据是在一个64长度的字符集中映射出来的。base64最终生成的其实就是一长串字符串。因此Base64是一种用64个字符来表示任意二进制数据的方法。

下面是base64的字符集：

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=

字节、位

位是计算机存储单元最小单位，一个位表示一个0或者一个1，一字节有8位。

二进制与Base64的转换关系

如上图所示，当数据刚好3个字节的时候使用4个字符去表示这3个字节，它们的比例为3：4，这就意味着基于base64编码的文本数据要比基于二进制表示的数据要多33%，原本3个字节可以表示的数据我们用base64去表示就会需要4个字节去表示。

因此base64的优点就是它的可读性，易用性。缺点就是比原始二进制数据使用了更多空间去表示数据。

上面说的比例3：4可以使用4个字节去生成base64字符串，当原始二进制数据不是3的倍数时也同样可以表示。

当原始数据不是字节数不是3的倍数时

原始数据不可能刚刚好3的倍数，假设现在我们的原始数据是2个字节，也就是16位，换算成base64要囊括这16位数据需要3 * 6 =18位数据来表示，就多余了2位，多出的数据我们就可以使用”=“来表示，也就是上面字符集中的最后一个符号。当多出2位的时候就使用两个”=“来补足。

二进制数据与base64的转换

我们以字符”A“的转换举例来看看是如何转换的。

首先A的Unicode码为65，二进制表示为0100 0001，然后将其右移2位，相对于取8位中的6位，与上面所说一致。得到16，二进制表示为0001 0000。之后我们补足了一个字节的6位还需要2位，后面的两位需要由下一个字符贡献4位，当前字符贡献2位。虽然我们输入的A只有一个字符，但还是需要这样算。我们去A的末尾有效为两位即与3（二进制11）与运算然后左移4位，之后用后面一个字符的右移4位组成一个新的字符，算出两个值均为16，查表得16，因为A用base64空了4位，需要用两个==补足，因此A用base64表示得到了QQ==。

代码实现

/*** 个人工具集合*/
window.Tool = (function(exports){'use strict';/*** base64处理工具*/class Base64{/*** 构造函数*/constructor(){}/*** 编码Base64* @param {string} input */static encode64(input){input = escape(input);//转义字符var output = "";var c1,c2,c3 = "";var e1,e2,e3,e4 = "";var i = 0;do{c1 = input.charCodeAt(i++);//返回指定字符位置的Unicode编码c2 = input.charCodeAt(i++);c3 = input.charCodeAt(i++);e1 = c1 >> 2;//右移2位 e2 = ((c1 & 3) << 4) | (c2 >> 4);//3二进制：11e3 = c3 & 63;//63二进制：111111if(isNaN(c2)){e3 = e4 = 64;//=}else if(isNaN(c3)){e4 = 64;//=}output = output + Base64.keyChar.charAt(e1) + Base64.keyChar.charAt(e2) + Base64.keyChar.charAt(e3) + Base64.keyChar.charAt(e4);c1 = c2 = c3 = "";e1 = e2 = e3 = e4 = "";                                }while(i < input.length);return output;}/*** 解码Base64* @param {string} input */static decode64(input){var output = "";var c1,c2,c3 = "";var e1,e2,e3,e4 = "";var i = 0;var base64test = /[^A-Za-z0-9\+\/\=]/g;if(base64test.exec(input)){alert("ERROR INPUT:base64字符只能包含A-Z,a-z,0-9,'+','/','='");return;}input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");do{e1 = Base64.keyChar.indexOf(input.charAt(i++));e2 = Base64.keyChar.indexOf(input.charAt(i++));e3 = Base64.keyChar.indexOf(input.charAt(i++));e4 = Base64.keyChar.indexOf(input.charAt(i++));c1 = (e1 << 2) | (e2 >> 4);//c2 = ((e2 & 15) << 4) | (e3 >> 2);//15二进制：1111c3 = ((e3 & 3) << 6) | e4;//3二进制：11output = output + String.fromCharCode(c1);if(e3 != 64){output = output + String.fromCharCode(c2);}if(e4 != 64){output = output + String.fromCharCode(c3);}c1 = c2 = c3 = "";e1 = e2 = e3 = e4 = "";}while(i < input.length);return unescape(output);}}Base64.keyChar = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=`;exports.Base64 = Base64;return exports;
}({}))