Principles and implementation of base64 encoding

I. Base64 encoding Principle

Step 1: Convert all characters into ASCII codes;
Step 2: Convert the ASCII code into an 8-bit binary code;
Step 3: Combine the binary three into a group (less than three are supplemented with 0) with a total of 24 bits and then split them into four groups, each with 6 bits;
Step 4: Add two zeros before the six-digit binary complement eight digits;
Step 5: Convert the binary value after 0 to decimal;
Step 6: Obtain the Base64 encoding in decimal format from the Base64 encoding table;

Note: The final Base64 encoding for less than three zeros is =, rather than!

Ii. Example of Base64 encoding

Example 1: Base64 encoding for zyq is enlx

Example 2: The Base64 encoding for mzwu is bXp3dQ =

In addition to ie, most modern browsers support native base64-based encode and decode, such as btoa and atob. (Save the canvas as an img and forcibly change the mimetype to download the canvas, which will be recorded in the next record)

However, I was curious about the base64 encoding principle. So that it can be implemented in ie that does not support native base64 encoding.

[Base64]
-Base64 encoding is based on the string length. Each 3 8-bit characters are used as a group,
-Then, for each group, the ASCII code of each character is obtained first,
-Convert the ASCII code to an 8-bit binary code to get a group of 3*8 = 24bit bytes.
-Divide the 24bit into 4 6-bit bytes, and fill in two high 0 values before each 6-bit byte to get 4 8-bit bytes.
-Convert the four 8-bit bytes into a 10-digit notation and compare them with the Base64 encoding table (The following table) to obtain the encoded characters.

(Note: 1. the encoded characters must be 8 bits. Therefore, they must be within the ASCII encoding range, \ u0000-\ u00ff.
2. if the length of the encoded character is not a multiple of 3, 0 is used instead, and the corresponding output character is =)

Base64 encoding table
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	/

For example, let's take the following two examples:
A) when the character length can be divisible by 3: for example, "Tom ":

Copy codeThe Code is as follows: T o m
ASCII: 84 111 109
Bit Bytes: 01010100 01101111 01101101
Bit Bytes: 010101 000110 111101 101101
Decimal: 21 6 61 45
Corresponding encoding: v g 9 t

Therefore, btoa ('Tom ') = VG9t
B) when the length of a string cannot be divisible by 3, for example, "Lucy ":Copy codeThe Code is as follows: L u c y
ASCII: 76 117 99 121
Bit Bytes: 01001100 01110101 01100011 01111001 00000000 00000000
Bit Bytes: 010011 000111 010101 100011 011110 010000 000000 000000
Decimal: 19 7 21 35 30 16 (exception)
Encoding: t h v j e Q =

Because Lucy only has four letters, if there are three in one group, there are two vacancies in the second group. Therefore, you need to fill them with 0. It should be noted that because it is a zero value that needs to be filled up, it cannot be converted to a decimal value according to the regular base64 encoding table, so it is not, it can be understood as a special "exception", and the encoding should correspond to "= ".
With the above theory, it is easy to implement a base64 encoding.Copy codeThe Code is as follows :/**
* 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 ){
// The first six digits only need to move the eight binary values to the right two
Case 0:
Result. push (base64hash. charAt (ascii> 2 ));
Break;
// The second six digits = the last two digits of the first eight digits + the first four digits of the second eight digits
Case 1:
Result. push (base64hash. charAt (prev & 3) <4 | (ascii> 4 )));
Break;
// The third six digits = the last four digits of the second eight digits + the first two digits of the third eight digits
// 4th digits 6 digits = The Last 6 digits of the third eight digits
Case 2:
Result. push (base64hash. charAt (prev & 0x0f) <2 | (ascii> 6 )));
Result. push (base64hash. charAt (ascii & 0x3f ));
Break;
}
Prev = ascii;
I ++;
}
// Check the mod after the loop ends. If it is 0, three 6 digits must be added, and the first digit is the last two digits of the last eight digits followed by four zeros. The other two 6 digits correspond to the abnormal "= ";
// Mod is 1, which proves that two or six digits are required. One is the last four digits of the last eight digits and the other matches the exception "="
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
// Reverse the idea of 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