Base64是如何進行的

開始

還記得以前產品同窗給我發了段代碼，要我看看，並且最近他一直在催我找工做，相必這也是和jd相關了。遂思考前端的加密方式：

1. 自行加密。這種沒代碼就別考慮了
2. Base64。嗯~可以加解密
3. MD5。雖然有爆出能解密了，但我仍是以爲怎麼可能[黑人問號臉]
4. RSA。對稱加密稍微瞭解一下，沒私鑰那也gg...

總的來講，給前端能看懂的就Base64了。So，百度搜了下Base64，果真第一個就是能用的工具，嘿嘿嘿~成功裝了波13

結束

So，結束了嗎，怎麼可能？首先來吐幾個槽點：

1. 做爲一個專業的前端開發，居然還要找Base64網站？
2. 做爲一個開發，do you know Base64?

咳咳咳~下面開始裝13

Base64

關於它的詳細信息，口水說沒了我均可能講不清楚，這波自行維基。

簡單來講，有規律地把三個字符變四個，不夠的填上=號。固然，這四個字符也有規定：A-Z、a-z、0-九、+、/，總共64個，沒毛病

好的，如今重點是變戲法（3 => 4）：

1. 計算機識別的只有二進制
2. Base64字符串中最小index爲63，轉換成二進制爲111111，最小爲6位
3. 三、四、6最小公倍數爲24

說的看似無關，其實步步緊要。來看一張轉換圖

被安排的明明白白~[笑哭]。仍是有點兒暈，看栗子

ok，差很少也知道它的轉化原理了。可是，"talk is cheap, show me the code"。

固然了，這還不簡單，寫個循環就夠了：

1. 每加3一循環，裏面先轉ASCII碼，變成二進制，保證其爲8位，再用+號拼接...
2. 而後再分別取6位，轉成十進制，變成Base64字符，拼接OK

pia，pia，pia~打臉，再這樣人人都成產(gong)品(cheng)經理(shi)了。看起來沒毛病，我就是這麼想的了，但是看完github上star最多的js-base64項目後，發現臉很腫。。。

代碼

喜聞樂見的代碼段，這裏只是js-base64的簡化版，有興趣的老鐵能夠去github上看。首先準備點知識：

// 按位操做符 & | >>> <<，可參考MDN上文檔
// &，只有兩個位都爲1才得1
0010 & 1111; // 0010
// |，至少有個1能得1
0010 | 1111; // 1111
// <<，左移，右側填0
0010 << 2; // 1000
// >>>，無符號右移，右側丟棄，左側填0
0010 >>> 2; // 0000
複製代碼

從核心開始，三轉四的粗略版：

// Base64字符串
const base64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
// 原字符串
const word3 = 'Tao';
const len = word3.length
// 1. 第一個字符ASCII的二進制右移16位，變成了24位二進制
// 2. 第二個右移8位
// 3, 三個二進制按位或，把後兩個二進制填到第一個。這正是精彩之處！
// 其實我第一次看時，當作了邏輯或，一直納悶兒它怎麼處理三個字符的，hah
const bit24 = word3.charCodeAt(0) << 16
            | (len > 1 ? word3.charCodeAt(1) << 8 : 0)
            | (len > 2 ? word3.charCodeAt(2) : 0);

const word4Array = [
    base64.charAt(bit24 >>> 18),
    // & 63，保證取得後6位二進制，由於前面都爲0，按位與掉了
    base64.charAt((bit24 >>> 12) & 63),
    len === 1 ? '=' : base64.charAt((bit24 >>> 6) & 63),
    len <= 2 ? '=' : base64.charAt(bit24 & 63),
];

console.log(word4Array.join('')); // 加密字符串：VGRU
複製代碼

反過來解碼亦然，不過有幾個注意點：

1. 二進制的移動正好相反
2. 爲保證取後8位，應該& 255，由於255.toString(2) === '11111111'，8位

瀏覽器的方法

上面只是字符轉Base64，還有圖片轉呢？這個我不知道，等各路大神解答[笑哭]...

固然，瀏覽器裏提供的方法傻瓜式調用仍是能夠的。使用FileReader API，例如：

const file = document.querySelector('[type="file"]').files[0];
const reader = new FileReader();

reader.readAsDataURL(file);
reader.onload = () => console.log(reader.result);
複製代碼

轉圖片更簡單，直接img.src = 'data:image/*;base64,'+ str便可。

轉字符也沒問題，現代瀏覽器的兩方法：

1. window.atob，解碼
2. window.btoa，編碼

Suprise the mother fuck，說了半天原來瀏覽器都有。全都是安排~

附上一張兼容性圖：

徹底能用了，老鐵。

參考連接

Base64維基：en.wikipedia.org/wiki/Base64

js-base64項目：github.com/dankogai/js…

ps：項目做者好像是臺灣同胞，看到readme裏繁體字了。不過道聽途說國家要收復臺灣了 ，就在幾年以內，搞很差過個2-3年要打仗了....