關於base64編碼的原理及實現

weixin_33766168發表於2018-03-10

我們的圖片大部分都是可以轉換成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編碼就容易了。
 

複製程式碼
/**
 * 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

相關文章