深入淺出JavaScript中base64編碼原理

<!-- 缺2位字符,字符串以A為例轉換base64後位QQ== -->
|   文本（1Byte）  |    A     |          |          |
| 二進制位         | 01000001 |          |          |
| 分組二進制       | 010000   | 010000   |          |          |
| 分組二進制補0    | 00010000 | 00010000 |          |          |
| 分組索引         |   16     |   16     |          |          |
| base64編碼       |   Q     |   Q      |    =      |   =      |

<!-- 缺1位字符,字符串以AB為例轉換base64後位QUI= -->
|   文本（1Byte）  |    A     |     B    |          |
| 二進制位         | 01000001 | 01000010 |          |
| 分組二進制       | 010000   | 010100   |  001000  |          |
| 分組二進制補0    | 00010000 | 00010100 | 00001000 |          |
| 分組索引         |   16     |   20     |    8      |          |
| base64編碼       |   Q     |   U      |    I      |   =      |

// 簡單數據
const encodedData = btoa('Hello, world'); // encode a string
const decodedData = atob(encodedData); // decode the string

/* 復雜數據 */
// convert a Unicode string to a string in which
// each 16-bit unit occupies only one byte
function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i < codeUnits.length; i++) {
    codeUnits[i] = string.charCodeAt(i);
  }
  const charCodes = new Uint8Array(codeUnits.buffer);
  let result = '';
  for (let i = 0; i < charCodes.byteLength; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}
function fromBinary(binary) {
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < bytes.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  const charCodes = new Uint16Array(bytes.buffer);
  let result = '';
  for (let i = 0; i < charCodes.length; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}

// a string that contains characters occupying > 1 byte
const myString = '☸☹☺☻☼☾☿';

const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded); // OCY5JjomOyY8Jj4mPyY=

const decoded = atob(encoded);
const original = fromBinary(decoded);
console.log(original); // ☸☹☺☻☼☾☿

// base64編碼表
const map = {
  0: 52,
  1: 53,
  2: 54,
  3: 55,
  4: 56,
  5: 57,
  6: 58,
  7: 59,
  8: 60,
  9: 61,
  A: 0,
  B: 1,
  C: 2,
  D: 3,
  E: 4,
  F: 5,
  G: 6,
  H: 7,
  I: 8,
  J: 9,
  K: 10,
  L: 11,
  M: 12,
  N: 13,
  O: 14,
  P: 15,
  Q: 16,
  R: 17,
  S: 18,
  T: 19,
  U: 20,
  V: 21,
  W: 22,
  X: 23,
  Y: 24,
  Z: 25,
  a: 26,
  b: 27,
  c: 28,
  d: 29,
  e: 30,
  f: 31,
  g: 32,
  h: 33,
  i: 34,
  j: 35,
  k: 36,
  l: 37,
  m: 38,
  n: 39,
  o: 40,
  p: 41,
  q: 42,
  r: 43,
  s: 44,
  t: 45,
  u: 46,
  v: 47,
  w: 48,
  x: 49,
  y: 50,
  z: 51,
  '+': 62,
  '/': 63,
};

function base64to2(base64) {
  let len = base64.length * 0.75; // 轉換為int8array所需長度
  base64 = base64.replace(/=*$/, ''); // 去掉=號（占位的）

  const int8 = new Int8Array(len); //設置int8array視圖
  let arr1,
    arr2,
    arr3,
    arr4,
    p = 0;

  for (let i = 0; i < base64.length; i += 4) {
    arr1 = map[base64[i]]; // 每次循環 都將base644個字節轉換為3個int8array直接
    arr2 = map[base64[i + 1]];
    arr3 = map[base64[i + 2]];
    arr4 = map[base64[i + 3]];
    // 假設數據arr 數據 00101011 00101111 00110011 00110001
    int8[p++] = (arr1 << 2) | (arr2 >> 4);
    // 上面的操作 arr1向左邊移動2位 變為10101100
    // arr2 向右移動4位：00000010
    // | 為'與'操作: 10101110
    int8[p++] = (arr2 << 4) | (arr3 >> 2);
    int8[p++] = (arr3 << 6) | arr4;
  }
  return int8;
}

// base64圖片轉blob
function base64toBlob(base64) {
  var arr = base64.split(','),
    mime = arr[0].match(/:(.*?);/)[1] || 'image/png',
    bstr = atob(arr[1]), // 將base64轉為Unicode規則編碼
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n); // 轉換編碼後才可以使用charCodeAt 找到Unicode編碼
  }
  return new Blob([u8arr], { type: mime });
}

/* 優化版 */
function base64ToBlob(base64) {
  var arr = base64.split(',');
  var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
  // 去掉url的頭，並轉化為byte
  var bytes = window.atob(arr[1]);
  // 處理異常,將ascii碼小於0的轉換為大於0
  var ab = new ArrayBuffer(bytes.length);
  // 生成視圖（直接針對內存）：8位無符號整數，長度1個字節
  var u8arr = new Uint8Array(ab);

  for (var i = 0; i < bytes.length; i++) {
    u8arr[i] = bytes.charCodeAt(i);
  }

  return new Blob([u8arr], { type: mime });
}