前端base64全方位解析

一、base64簡介

1、什麼是base64

Base64是一種用64個字元來表示任意二進位數據的方法。由於二進位數據不太適合在文本協議中傳輸，所以將二進位數據使用可讀的文本表示。這就是base64編碼。

2、base64編碼流程

function base64(str) {
  let b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';//Base64編碼字元表
  let ret = '', i = 0, len = str.length;
  while (i < len) {
    let code = str.charCodeAt(i++) << 16 | str.charCodeAt(i++) <>> 18 & 0x3f) + b64.charAt(code >>> 12 & 0x3f)
         + b64.charAt(code >>> 6 & 0x3f) + b64.charAt(code & 0x3f);
  }
  return ret.substr(0, (len / 3) * 4);//在末尾填充「=」後要去掉。
}

3、base64的優缺點

優點：依靠可列印的ASCII字元表示，可以在任何地方直接顯示。

缺點：編碼後的數據 原則上比二進位數據多了1/3的長度，長文本的場合，base64編碼後的文本長度會明顯超過原文，會增加網路傳輸量。

二、base64的應用

1、圖片預覽

將圖片轉換成base64格式後，可以直接將base64碼放入標籤或者background-image中，實現圖片預覽效果。

//實現圖片上傳預覽
let input = document.querySelector('input[type="file"]');
input.addEventListener('change', function (e) {
  let files = e.target.files;
  let reader = new FileReader();
  reader.readAsDataURL(files[0]);
  reader.onload = function () {
    document.querySelector('.preview img').src = reader.result;
  }
});

2、跨域傳輸數據

在前端中使用jsonp或者cors請求時，如果需要將數據發送給跨域伺服器，可以使用base64編碼傳輸，以解決一些伺服器不能接收非文本數據的問題。

//在URL中傳輸base64編碼後的數據
let img = document.querySelector('.preview img');
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
let base64 = canvas.toDataURL('image/jpeg');//轉為base64編碼
let param = encodeURIComponent(base64);//URL編碼後作為參數
let url = 'http://www.example.com?img=' + param;

三、base64的安全性

1、base64並不能提高數據的安全性

Base64編碼僅僅是一種編碼方式，不具有加密功能，base64編碼後的數據和明文數據在網路傳輸中一樣容易被截取、篡改或者竊取。所以在傳輸的時候，還需要使用其他的加密手段來保證數據的安全性。

2、base64的逆轉

Base64編碼是可以逆轉的，也就是可以將base64編碼的數據解碼成明文數據。所以在傳遞一些敏感數據時，應該使用其他加密方式配合base64編碼來提高過去的安全性。

//加密
let str = 'My Password';
let base64Str = window.btoa(encodeURIComponent(str));//先進行URI編碼 再進行base64編碼

//解密
let base64Str = 'TXkgUGFzc3dvcmQ=';
let str = decodeURIComponent(window.atob(base64Str));//先進行base64解碼 再進行URI解碼

四、base64的兼容性

在現代瀏覽器中，base64的應用非常廣泛，特別是在移動端APP內嵌H5 APP中，base64將會是一個重要的手段。不過在一些老舊的瀏覽器（如IE8及以下）中，對base64的支持不友好，因此需要一些特殊的兼容性處理。

//確保blob對象的兼容性
const Blob = window.Blob || window.webkitBlob;
const URL = window.URL || window.webkitURL;
let img = document.querySelector('.preview img');
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
canvas.toBlob(blob => {
  let xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(blob);//發送blob對象
}, 'image/png');

五、結語

base64是一種實用的編碼方式，可以在前端中實現很多有用的功能。但是，同時也需要注意它的缺點和安全性。希望大家在使用的時候充分考慮相關問題並且使用。