Base64編碼是一種將字節數據編碼為字符串的編碼，字節數據會被編碼成由64個可打印ASCII字符組成的字符串,這64個字符包括大寫字母A-Z, 小寫字母a-z, 以及數字 0 -9再加上 + 和 / ，剛好64個字符。對應的字符表如下圖：

base64編碼的一個用途就是對http的頭信息進行編碼，由于http頭信息使用ASCII編碼，如果包含特殊字符可能會導致頭信息解析異常，采用base64編碼保證頭信息只包含一些簡單字符，提高了安全性。前端在顯示圖片元素時也經常會遇到base64編碼的圖片資源。

那么base64具體是如何進行編碼的呢？

編碼方式很簡單，就是對目標字節中的每六個bit位表示為字母表中的某個字符，例如：

‘abc’對應的二進制字節為： 01100001 , 01100010 , 01100011 ; 每六位進行分組得到的結果如下：

011000， 010110， 001001， 100011，轉化為10進制就是：24，22， 9， 35，根據上面的字母表得到各個數字對應的字符為：YWJj，所以abc最終會被編碼為 ‘YWJj’。由于三個字節最終被編碼成了四個字節的字符串，所以長度增加了1/3.

看著這里大家可能會有一個問題，假設原數據的字節長度不是3的倍數，就會有剩余的bit位不夠6個字符，這是就會涉及到填充的問題，填充就是在原數據后面加上額外的冗余位，使數據的bit位長度剛好能被24(也就是3個字節)整除(6和8的最小公倍數)。具體的填充規則可以簡單的表述為： 任何完全填充(不包含原始數據中的位) 的 6 位組都由特殊的第 65 個符號“=” 表示。 如果 6 位組是部分填充的， 就將填充位設置為 0(http權威指南)。

舉個例子：假設在編碼的過程中原數組有四個字節,這時就需要再填充2個字節。假設最后的兩個bit為是10，填充后的數據的最后幾位如下：

10 xxxx， xxxxxx，xxxxxx (x代表填充位)

根據前面描述的填充規則：第一個6位組對應的數字為 10 0000，后面兩個由于時完全填充的，被編碼為==,最終的結果的后三位就變成了‘g==’。

在瀏覽器端，可以調用全局的方法 atob 和 btoa 實現二進制字符與base64編碼的字符之間的互相轉化。下面給出一個base64編碼前端實現的簡單例子：

const table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';// 參數為待編碼的字符串async function toBase64(str) {const blob = new Blob([str], { type: 'text/plain' });// 獲取字節長度，也可以使用第三方庫提供的同步方法// 這里為了演示簡單const srcBuf = await blob.arrayBuffer();// 獲取原數據的字節長度const length = blob.size;// 計算需要填充的位數const padLen = length % 3 === 1? 2: length % 3 === 2 ? 1 : 0;// 最終的長度const size = length + padLen;const arrBuf = new ArrayBuffer(size);const srcArray = new Uint8Array(srcBuf);const dstArray = new Uint8Array(arrBuf);for (let i = 0; i < size; i++) {if (i < length) {dstArray[i] = srcArray[i];} else {dstArray[i] = 0x00;}}let result = [];// 每次處理3個字節for (let i = 0; i < size; i += 3) {// 取出三個字節const a = dstArray[i];const b = dstArray[i + 1];const c = dstArray[i + 2];// 最后一組const isLast = i + 3 > length;console.log(padLen)result.push(a >> 2); // 第一個字節的前6位result.push(((a & 0b00000011) << 4) | (b >> 4)); // 第一個字節的后兩位加上第二個字節的前四位// 第二個字節的后四位加上的三個字節的前兩位if (!isLast || padLen === 0) {result.push(((b & 0b00001111) << 2) | (c >> 6));result.push(c & 0b00111111); // 第三個字節的后六位} else {if (padLen === 2) {result.push('=', '=');} else if (padLen === 1) {result.push(((b & 0b00001111) << 2) | (c >> 6), '=');}}}result = result.map(code => code === '=' ? '=' : table[code]).join('');return result;}

base64轉二進制字節原理類似，有興趣的童鞋可以自行嘗試！！

實際的運行效果如下圖：

總結

以上是生活随笔為你收集整理的讲字节数组转化为base64_Base64编码简介及简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。