關於base64編碼的原理及實現

咱們的圖片大部分都是能夠轉換成base64編碼的data：image。 這個在將canvas保存爲img的時候尤爲有用。雖然除ie外，大部分現代瀏覽器都已經支持原生的基於base64的encode和decode，例如btoa和atob。（將canvas畫布保存成img並強制改變mimetype進行下載，會在下一篇記錄）

可是處於好奇心，仍是驅使我去了解下base64編碼的原理。以便也在不支持原生base64編碼的ie下能夠得以實現。

【Base64】
-base64的編碼都是按字符串長度，以每3個8bit的字符爲一組，
-而後針對每組，首先獲取每一個字符的ASCII編碼，
-而後將ASCII編碼轉換成8bit的二進制，獲得一組3*8=24bit的字節
-而後再將這24bit劃分爲4個6bit的字節，並在每一個6bit的字節前面都填兩個高位0，獲得4個8bit的字節
-而後將這4個8bit的字節轉換成10進制，對照Base64編碼表 （下表），獲得對應編碼後的字符。

（注：1. 要求被編碼字符是8bit的，因此須在ASCII編碼範圍內，\u0000-\u00ff，中文就不行。
　　　2. 若是被編碼字符長度不是3的倍數的時候，則都用0代替，對應的輸出字符爲=）

Base64 編碼表
Value	Char		Value	Char		Value	Char		Value	Char
0	A		16	Q		32	g		48	w
1	B		17	R		33	h		49	x
2	C		18	S		34	i		50	y
3	D		19	T		35	j		51	z
4	E		20	U		36	k		52	0
5	F		21	V		37	l		53	1
6	G		22	W		38	m		54	2
7	H		23	X		39	n		55	3
8	I		24	Y		40	o		56	4
9	J		25	Z		41	p		57	5
10	K		26	a		42	q		58	6
11	L		27	b		43	r		59	7
12	M		28	c		44	s		60	8
13	N		29	d		45	t		61	9
14	O		30	e		46	u		62	+
15	P		31	f		47	v		63	/

好比舉下面2個例子：
a) 字符長度爲能被3整除時：好比「Tom」 ：

 T           o           m
ASCII:      84          111         109
8bit字節:   01010100    01101111    01101101
6bit字節:     010101      000110      111101      101101
十進制:     21          6           61          45
對應編碼:   V           G           9           t  

因此，btoa('Tom') = VG9t

b) 字符串長度不能被3整除時，好比「Lucy」：

        L           u           c           y
ASCII:      76          117         99          121
8bit字節:   01001100    01110101    01100011    01111001      00000000    00000000
6bit字節:     010011      000111      010101      100011      011110  010000  000000  000000
十進制:     19          7           21          35             30      16      (異常) (異常)      
對應編碼:   T           H           V           j               e       Q       =       =

因爲Lucy只有4個字母，因此按3個一組的話，第二組還有兩個空位，因此須要用0來補齊。這裏就須要注意，由於是須要補齊而出現的0，因此轉化成十進制的時候就不能按常規用base64編碼表來對應，因此不是a， 能夠理解成爲一種特殊的「異常」，編碼應該對應「=」。

有了上面的理論，那咱們實現一個base64編碼就容易了。

       break;
                    //第三個6位 = 第二個8位的後4位 + 第三個8位的前2位
                    //第4個6位 = 第三個8位的後6位
                    case 2:
                        result.push(base64hash.charAt((prev & 0x0f) << 2 | (ascii >> 6)));
                        result.push(base64hash.charAt(ascii & 0x3f));
                        break;
                }

                prev = ascii;
                i ++;
            }

            // 循環結束後看mod, 爲0 證實需補3個6位，第一個爲最後一個8位的最後兩位後面補4個0。另外兩個6位對應的是異常的「=」；
            // mod爲1，證實還需補兩個6位，一個是最後一個8位的後4位補兩個0，另外一個對應異常的「=」
            if(mod == 0) {
                result.push(base64hash.charAt((prev & 3) << 4));
                result.push('==');
            } else if (mod == 1) {
                result.push(base64hash.charAt((prev & 0x0f) << 2));
                result.push('=');
            }

            return result.join('');
        }

        // atob method
        // 逆轉encode的思路便可
        function _atob (s) {
            s = s.replace(/\s|=/g, '');
            var cur,
                prev,
                mod,
                i = 0,
                result = [];

            while (i < s.length) {
                cur = base64hash.indexOf(s.charAt(i));
                mod = i % 4;

                switch (mod) {
                    case 0:
                        //TODO
                        break;
                    case 1:
                        result.push(String.fromCharCode(prev << 2 | cur >> 4));
                        break;
                    case 2:
                        result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2));
                        break;
                    case 3:
                        result.push(String.fromCharCode((prev & 3) << 6 | cur));
                        break;
                        
                }

                prev = cur;
                i ++;
            }

            return result.join('');
        }

        return {
            btoa: _btoa,
            atob: _atob,
            encode: _btoa,
            decode: _atob
        };
    }();

    if (!win.Base64) { win.Base64 = Base64 }
    if (!win.btoa) { win.btoa = Base64.btoa }
    if (!win.atob) { win.atob = Base64.atob }

 })(window)