前端Base64编码知识，一文打尽，探索起源，追求真相。

const ctx = canvasEl.getContext("2d");
// ...... other code
const dataUrl = canvasEl.toDataURL();
// data:image/png;base64,iVBORw0KGgoAAAANSUhE.........
复制代码

function readAsDataURL() {
    const fileEl = document.getElementById("inputFile");
    return new Promise((resolve, reject) => {
        const fd = new FileReader();
        fd.readAsDataURL(fileEl.files[0]);
        fd.onload = function () {
            resolve(fd.result);
            // data:image/png;base64,iVBORw0KGgoAAAA.......
        }
        fd.onerror = reject;
    });
}
复制代码

<link rel="icon" href="data:," />
<link rel="icon" href="data:;base64,=" />
复制代码

<canvas height="0" width="0" id="canvas"></canvas>
<script>
    const canvasEl = document.getElementById("canvas");
    const ctx = canvasEl.getContext("2d");
    dataUrl = canvasEl.toDataURL();
    console.log(dataUrl);  // data:,
</script>
复制代码

<img src="data:image/png;base64,iVBORw0KGgoAAAA......." />
复制代码

.bg{
    background: url(data:image/png;base64,iVBORw0KGgoAAAA.......)
}
复制代码

const username = document.getElementById("username").vlaue; 
  const password = document.getElementById("password").vlaue;  
  const secureKey = "%%S%$%DS)_sdsdj_66";
  const sPass = utf8_to_base64(password + secureKey);
  doLogin({
      username,
      password: sPass
  })
复制代码

{
　　　　version : 3,
　　　　file: "out.js",
　　　　sourceRoot : "",
　　　　sources: ["foo.js", "bar.js"],
　　　　names: ["src", "maps", "are", "fun"],
　　　　mappings: "AAgBC,SAAQ,CAAEA"
　　}
复制代码

--string-array-indexes-type '<list>' (comma separated) [hexadecimal-number, hexadecimal-numeric-string]
    --string-array-encoding '<list>' (comma separated) [none, base64, rc4]
    --string-array-index-shift <boolean>
    --string-array-wrappers-count <number>
    --string-array-wrappers-chained-calls <boolean>
复制代码

"a".charCodeAt(0)  // 97
"中".charCodeAt(0) // 20013
复制代码

0b11111111 // 255
0b10000000 // 128 后面会用到
0b11000000 // 192 后面会用到
复制代码

0x11111111 // 286331153
复制代码

100..toString(2)  // 1100100
100..toString(16) // 64, 也等于 ox64
复制代码

parseInt("10000000", 2) // 128
parseInt("10",16) // 16
复制代码

+"1000" // 1000
+"0b10000000" // 128
+"0o10" // 8
+"0x10" // 16
复制代码

0 1 0 0 0 0 0 0       64
-------------------
   0 1 0 0 0 0 | 0 0  16
复制代码

110111 100001
       111111
------------
000000 100001
复制代码

01100001
复制代码

11100110 10001110 10011000
复制代码

console.log(to_binary("A"))  // 11100001
console.log(to_binary("س"))  // 1101100010110011
console.log(to_binary("掘")) // 111001101000111010011000
复制代码

function to_binary(str) {
  const string = str.replace(/\r\n/g, "\n");
  let result = "";
  let code;
  for (var n = 0; n < string.length; n++) {
    //获取麻点
    code = str.charCodeAt(n);
    if (code < 0x007F) { // 1个字节
      // 0000 0000 ~ 0000 007F  0 ~ 127 1个字节
      // (code | 0b100000000).toString(2).slice(1)
      result += (code).toString(2).padStart(8, '0'); 
    } else if ((code > 0x0080) && (code < 0x07FF)) {
      // 0000 0080 ~ 0000 07FF  128 ~ 2047 2个字节
      // 0x0080 的二进制为 10000000 ，8位，所以大于0x0080的，至少有8位
      // 格式 110xxxxx 10xxxxxx     
      // 高位 110xxxxx
      result += ((code >> 6) | 0b11000000).toString(2);
      // 低位 10xxxxxx
      result += ((code & 0b111111) | 0b10000000).toString(2);
    } else if (code > 0x0800 && code < 0xFFFF) {
      // 0000 0800 ~ 0000 FFFF  2048 ~ 65535  3个字节
      // 0x0800的二进制为 1000 00000000，12位，所以大于0x0800的，至少有12位
      // 格式 1110xxxx 10xxxxxx 10xxxxxx
      // 最高位 1110xxxx
      result += ((code >> 12) | 0b11100000).toString(2);  
      // 第二位 10xxxxxx
      result += (((code >> 6) & 0b111111) | 0b10000000).toString(2);
      // 第三位 10xxxxxx
      result += ((code & 0b111111) | 0b10000000).toString(2);
    } else {
      // 0001 0000 ~ 0010 FFFF   65536 ~ 1114111   4个字节 
      // https://www.unicode.org/charts/PDF/Unicode-13.0/U130-2F800.pdf
      throw new TypeError("暂不支持码点大于65535的字符")
    }
  }
  return result;
}
复制代码

110xxxxx 10xxxxxx
复制代码

11000000
   11000 | 110011 
--------------
11011000      
复制代码

110xxxxx 10xxxxxx
复制代码

11000 110011
      111111
------------------
      110011  
复制代码

11000 110011
       111111         (code & 0b111111)
 ------------------
       110011  
    10 000000         (code & 0b111111) | 0b10000000
-------------------
    10 110011
复制代码

11100110
10001110
10011000
01000001
--------
00000000
00000000
复制代码

00 | 111001  => 57 => 5
00 | 101000  => 40 => o
00 | 111010  => 58 => 6
00 | 011000  => 24 => Y
00 | 110000  => 16 => Q
00 | 010000  => 16 => Q
00 | 000000  =>    => =
00 | 000000  =>    => =
复制代码

console.log(utf8_to_base64("a")); // YQ==
console.log(utf8_to_base64("Ȃ"));  // yII=
console.log(utf8_to_base64("中国人")); // 5Lit5Zu95Lq6
console.log(utf8_to_base64("Coding Writing 好文召集令｜后端、大前端双赛道投稿，2万元奖池等你挑战！"));
//Q29kaW5nIFdyaXRpbmcg5aW95paH5Y+s6ZuG5Luk772c5ZCO56uv44CB5aSn5YmN56uv5Y+M6LWb6YGT5oqV56i/77yMMuS4h+WFg+WlluaxoOetieS9oOaMkeaImO+8gQ==
复制代码

const BASE64_CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
function utf8_to_base64(str: string) {
  let binaryStr = to_binary(str);
  const len = binaryStr.length;
  // 需要填补的=的数量
  let paddingCharLen = len % 24 !== 0 ? (24 - len % 24) / 8 : 0;
  //6个一组
  const groups = [];
  for (let i = 0; i < binaryStr.length; i += 6) {
    let g = binaryStr.slice(i, i + 6);
    if (g.length < 6) {
      g = g.padEnd(6, "0");
    }
    groups.push(g);
  }
  // 求值
  let base64Str = groups.reduce((b64str, cur) => {
    b64str += BASE64_CHARTS[+`0b${cur}`]
    return b64str
  }, "");
  // 填充=
  if (paddingCharLen > 0) {
    base64Str += paddingCharLen > 1 ? "==" : "=";
  }
  return base64Str;
}
复制代码

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}
function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}
复制代码