base 64 인 코딩 의 원리 및 실현 방법 공유

1.Base 64 인 코딩 원리 단계 1:모든 문 자 를 ASCII 코드 로 변환 합 니 다.STEP 2:ASCII 코드 를 8 비트 바 이 너 리 로 변환 합 니 다.STEP 3:바 이 너 리 3 개 를 한 조로 나 누 어(3 개 미 만 은 뒤에서 0 을 보충)총 24 자리 로 나 누고 4 조로 나 누 어 각 조 6 자리 로 나눈다.단계 4:6 위 2 진법 전에 0 을 두 개 보충 하여 8 위 를 채 웁 니 다.STEP 5:0 을 보충 한 바 이 너 리 를 10 진법 으로 바 꿉 니 다.단계 6:Base 64 인 코딩 표 에서 10 진법 에 대응 하 는 Base 64 인 코딩 가 져 오기; 설명:3 개 보충 0 이 부족 한 최종 Base 64 인 코딩 은 A 가 아 닌=입 니 다!2.Base 64 인 코딩 예시 1:zyq 대응 Base 64 인 코딩 은 enlx 예시 2:mzwu 대응 Base 64 인 코딩 은 bXp3dQ== ie 를 제외 하고 대부분의 현대 브 라 우 저 는 base 64 기반 encode 와 decode 를 지원 합 니 다.예 를 들 어 btoa 와 atob 등 입 니 다.canvas 캔버스 를 img 으로 저장 하고 mimetype 을 강제로 변경 하여 다운로드 합 니 다.다음 기록 에 있 습 니 다)
하지만 호기심 에 base 64 인 코딩 의 원 리 를 알 아 보라 고 부 추 겼 다.원생 base 64 인 코딩 을 지원 하지 않 는 ie 에서 도 가능 하도록 합 니 다.
【Base 64】-base 64 의 인 코딩 은 모두 문자열 의 길이 에 따라 8bit 의 문자 3 개 를 한 그룹 으로 합 니 다.-그리고 각 그룹 에 대해 먼저 각 문자 의 ASCII 인 코딩 을 가 져 옵 니 다.-그리고 ASCII 인 코딩 을 8bit 의 2 진법 으로 바 꾸 어 3*8=24 bit 의 바이트-그 다음 에 이 24bit 를 4 개의 6bit 바이트 로 나 누고 각 6bit 의 바이트 앞 에 두 개의 높 은 0 을 채 웁 니 다.8bit 바이트 4 개 를 얻 은 후,이 8bit 바이트 4 개 를 10 진법 으로 바 꾸 고,Base 64 인 코딩 표(아래 표)와 대조 하여 인 코딩 된 문 자 를 얻 습 니 다.
(주:1.인 코딩 된 문 자 는 8bit 이 므 로 ASCII 인 코딩 범위 내 에서\u0000-\u00ff,중국 어 는 안 됩 니 다.2.인 코딩 된 문자 길이 가 3 의 배수 가 아 닐 때 는 0 으로 대체 하고 해당 하 는 출력 문 자 는=)
Base 64 인 코딩 테이블
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
/
예 를 들 어 다음 두 가지 예 를 들 어 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')=VG9tb)문자열 의 길이 가 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 이기 때문에 10 진법 으로 전환 할 때 일반적인 base 64 인 코딩 표 로 대응 할 수 없 기 때문에 a 가 아니 라 특수 한'이상'으로 이해 할 수 있 고 인 코딩 은'='에 대응 해 야 합 니 다.위의 이론 이 있 으 면 우 리 는 base 64 인 코딩 을 실현 하 는 것 이 쉽다.

/**
 * 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