一、Base64編碼原理
步驟1：將所有字符轉化為ASCII碼；
步驟2：將ASCII碼轉化為8位二進制；
步驟3：將二進制3個歸成一組(不足3個在后邊補0)共24位，再拆分成4組，每組6位；
步驟4：統一在6位二進制前補兩個0湊足8位；
步驟5：將補0后的二進制轉為十進制；
步驟6：從Base64編碼表獲取十進制對應的Base64編碼；
說明：不足3個補0的最終Base64編碼為=，而不是A！
二、Base64編碼示例
示例一：zyq對應Base64編碼為enlx
示例二：mzwu對應Base64編碼為bXp3dQ==
雖然除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
bit字節: 01010100 01101111 01101101
bit字節: 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
bit字節: 01001100 01110101 01100011 01111001 00000000 00000000
bit字節: 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編碼就容易了。
復制代碼 代碼如下:
/**
* base64 encoding & decoding
* for fixing browsers which don't support Base64 | btoa |atob
*/
(function (win, undefined) {
var Base64 = function () {
var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
// btoa method
function _btoa (s) {
if (/([^/u0000-/u00ff])/.test(s)) {
throw new Error('INVALID_CHARACTER_ERR');
}
var i = 0,
prev,
ascii,
mod,
result = [];
while (i < s.length) {
ascii = s.charCodeAt(i);
mod = i % 3;
switch(mod) {
// 第一個6位只需要讓8位二進制右移兩位
case 0:
result.push(base64hash.charAt(ascii >> 2));
break;
//第二個6位 = 第一個8位的后兩位 + 第二個8位的前4位
case 1:
result.push(base64hash.charAt((prev & 3) << 4 | (ascii >> 4)));
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)
Base64 example
