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 編碼表
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編碼就容易了。
1 /** 2 * base64 encoding & decoding 3 * for fixing browsers which don't support Base64 | btoa |atob 4 */ 5 6 (function (win, undefined) { 7 8 var Base64 = function () { 9 var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; 10 11 // btoa method 12 function _btoa (s) { 13 if (/([^\u0000-\u00ff])/.test(s)) { 14 throw new Error('INVALID_CHARACTER_ERR'); 15 } 16 var i = 0, 17 prev, 18 ascii, 19 mod, 20 result = []; 21 22 while (i < s.length) { 23 ascii = s.charCodeAt(i); 24 mod = i % 3; 25 26 switch(mod) { 27 // 第一個6位只需要讓8位二進制右移兩位 28 case 0: 29 result.push(base64hash.charAt(ascii >> 2)); 30 break; 31 //第二個6位 = 第一個8位的后兩位 + 第二個8位的前4位 32 case 1: 33 result.push(base64hash.charAt((prev & 3) << 4 | (ascii >> 4))); 34 break; 35 //第三個6位 = 第二個8位的后4位 + 第三個8位的前2位 36 //第4個6位 = 第三個8位的后6位 37 case 2: 38 result.push(base64hash.charAt((prev & 0x0f) << 2 | (ascii >> 6))); 39 result.push(base64hash.charAt(ascii & 0x3f)); 40 break; 41 } 42 43 prev = ascii; 44 i ++; 45 } 46 47 // 循環結束后看mod, 為0 證明需補3個6位，第一個為最后一個8位的最后兩位后面補4個0。另外兩個6位對應的是異常的“=”； 48 // mod為1，證明還需補兩個6位，一個是最后一個8位的后4位補兩個0，另一個對應異常的“=” 49 if(mod == 0) { 50 result.push(base64hash.charAt((prev & 3) << 4)); 51 result.push('=='); 52 } else if (mod == 1) { 53 result.push(base64hash.charAt((prev & 0x0f) << 2)); 54 result.push('='); 55 } 56 57 return result.join(''); 58 } 59 60 // atob method 61 // 逆轉encode的思路即可 62 function _atob (s) { 63 s = s.replace(/\s|=/g, ''); 64 var cur, 65 prev, 66 mod, 67 i = 0, 68 result = []; 69 70 while (i < s.length) { 71 cur = base64hash.indexOf(s.charAt(i)); 72 mod = i % 4; 73 74 switch (mod) { 75 case 0: 76 //TODO 77 break; 78 case 1: 79 result.push(String.fromCharCode(prev << 2 | cur >> 4)); 80 break; 81 case 2: 82 result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2)); 83 break; 84 case 3: 85 result.push(String.fromCharCode((prev & 3) << 6 | cur)); 86 break; 87 88 } 89 90 prev = cur; 91 i ++; 92 } 93 94 return result.join(''); 95 } 96 97 return { 98 btoa: _btoa, 99 atob: _atob, 100 encode: _btoa, 101 decode: _atob 102 }; 103 }(); 104 105 if (!win.Base64) { win.Base64 = Base64 } 106 if (!win.btoa) { win.btoa = Base64.btoa } 107 if (!win.atob) { win.atob = Base64.atob } 108 109 })(window)