Skip to content

javascript base64 编码

首先来说下base64的编码原理,base64编码是把3个8bit(3*8=24bit)编码成4个6bit(4*6=24bit),并在每个6bit高位添加两个0构成一个8bit,然后换算成10进制,反查编码表即可得到对应的编码。由于2^6=64,即6bit的最大值是63,所以只需要64(0~63)个ASCII字符即可表示所有编码,因此得名base64编码。

base64的编码表如下:

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 /

下面来举例说明:

有一个字符串”abcd”

      a         b         c        d
ASCII:    0x61      0x62      0x63     0x64
8bit:  01100001   01100010  01100011 0110 0100
6bit:  011000   010110  001001 100011  011001 000000 = =
十进制:  24       22      9       35     25      0
查码表得: Y        W      J       j      Z       A   =  =
最终结果:YWJjZA==

你可能注意到了,是每3个8bit进行一次编码,如果编码到最后不够3字节怎么办?base64编码规定,对于不够3个8bit的,编码完成后少几个6bit添几个”=”,这会有两种情况:

1.剩1个8bit(假设为xxxxxxxx):
编码完成后得到:
xxxxxx xx0000 = =
此时还缺2个6bit,因此在末尾添加“==”
2.剩2个8bit(假设为xxxxxxxx yyyyyyyy):
编码后得到:
xxxxxx xxyyyy yy0000 =
此时还缺1个6bit,因此在末尾添加“=”

这也是为什么base64编码完成后面会有1到2个”=”。

看看下面这个演示动画吧
base64encode
实现代码:

//base64编码表
	var base64_encode_chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
function encode(s){
		var i = 0;
		var out = [];
		while(i>2));
				out.push(base64_encode_chars.charAt(c1<<4 & 0x30));
				out.push("==");
				break;
			}
			
			var c2 = s.charCodeAt(i++);
			if(i == s.length){
				out.push(base64_encode_chars.charAt(c1>>2));
				out.push(base64_encode_chars.charAt(c1<<4 & 0x30 | c2>>4));
				out.push(base64_encode_chars.charAt(c2<<2 & 0x3C));
				out.push("=");
			}
			
			var c3 = s.charCodeAt(i++);
			out.push(base64_encode_chars.charAt(c1>>2));
			out.push(base64_encode_chars.charAt(c1<<4 & 0x30 | c2>>4));
			out.push(base64_encode_chars.charAt(c2<<2 & 0x3C | c3>>6));
			out.push(base64_encode_chars.charAt(c3 & 0x3F));
		}
		
		return out.join('');
	}
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x