背景
以前的http仅支持文本传输，传ASCII 字符不同的系统可能会出问题、需要将二进制转存时需要字符可打印，诸如一系列问题，为了解决这些问题所以引出了base64。优点：编码简单，基本各种系统都支持。缺点：就是会是体积变大1/3
原理
- 选取base64的字符集，A-Z,a-Z,0-9,+,/ 总共就是：64个字符，都是可显示可打印的字符
- 数据转换
- 刚好转换的情况：3个字节总共24位，6位拆成1组，然后前面补2个0，构成1个字节，所以转换后得到4个字节。
- 如果不够3个字节，假如：待转换的只有1个字节，1个字节8位，就拆成2组，第一组6位(前补2个0)，第二组2位(不够6位，后面补4个0，前面补2个0)，此时只有2个字节，还需要2个字节，全部是0对应=。
说明：以上原理转换可能看得迷糊，不用着急，看我下面画的图你就懂了
Base64 索引表
ASCII 表
图解base
-
情况1： 待转换的字节数刚好为3的倍数时
-
情况2： 待转换的字节不够3个，为2个字节时
-
情况3： 待转换的字节不够3个，为1个字节时
代码实现
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
/**
* ASCII值映射=>Base64的索引值
* 除了base64的字符外，其他字符都用-1
*/
var base64DecodeChars = new Array(
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
-1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
function base64encode(str) {
var out, i, len;
var c1, c2, c3;
len = str.length;
i = 0;
out = "";
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt((c1 & 0x3) << 4);
out += "==";
break;
}
c2 = str.charCodeAt(i++);
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt((c2 & 0xF) << 2);
out += "=";
break;
}
c3 = str.charCodeAt(i++);
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
out += base64EncodeChars.charAt(c3 & 0x3F);
}
return out;
}
function base64decode(str) {
var c1, c2, c3, c4;
var i, len, out;
len = str.length;
i = 0;
out = "";
while (i < len) {
/* c1 */
do {
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
} while (i < len && c1 == -1);
if (c1 == -1)
break;
/* c2 */
do {
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
} while (i < len && c2 == -1);
if (c2 == -1)
break;
//! 凑出第1个真实字节数据：第1个字节取后6位 + 第2个字节取前[3,4]位
out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
/* c3 */
do {
c3 = str.charCodeAt(i++) & 0xff;
if (c3 == 61)
return out;
c3 = base64DecodeChars[c3];
} while (i < len && c3 == -1);
if (c3 == -1)
break;
//! 凑出第2个真实字节数据：第2个字节取后4位 + 第3个字节取前[3,6]位
out += String.fromCharCode(((c2 & 0xF) << 4) | ((c3 & 0x3C) >> 2));
/* c4 */
do {
c4 = str.charCodeAt(i++) & 0xff;
if (c4 == 61)
return out;
c4 = base64DecodeChars[c4];
} while (i < len && c4 == -1);
if (c4 == -1)
break;
//! 凑出第3个真实字节数据：第2个字节取后2位 + 第3个字节后6位
out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
}
return out;
}
let base64 = base64encode("Man")
console.log(base64);
console.log(base64decode(base64))
常见疑问
- 疑问：为啥用6位分组，凑成1个8位？ 原因：6位的最大值就是2^6-1，范围就是[0,63] 刚好存下base64的索引值
- 疑问：base64Encode("Ma")，结果：TWE=，为啥结果多了一个= 原因：base64的规则，3个字节转，总共24位，每位前面补2位，总共：32位4个字节， 由于Ma 分组后只能构成24位，构不成32位，所以用=凑1个出来字节，构成32位4个字节 所以末尾多了一个= 补充：假如是Base64Encode('M')，结果：TQ==，就会补两个== 由于只能M只能分2组出来，不够分出4组，所以另外两组用=来凑
