理解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二进制：11
                e3 = c3 & 63;//63二进制：111111
                if(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二进制：1111
                c3 = ((e3 & 3) << 6) | e4;//3二进制：11
                output = 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;
}({}))