Base64原理

RommHui

一、引言

Base64 在现在的网络中大量的使用，它是用于解决把不可见字节转为可见字符的算法。我们一直使用，却不知道其原理，我觉得不太行。我希望通过这篇文章，可以让读者知道，它是怎么样运作的，为什么可以让不可见的字节转成可见的字符。为什么转换后的数据长度是原来的 4 / 3。

二、基本原理

首先Base64为什么叫Base64，我觉得是因为转换后除去等号（=）最多只会出现64个字符。这64个字符分别是

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

+/

26 + 26 + 10 + 2 = 64

刚好就是64个，我觉得这就是叫Base64的原因。

以字符串“123”为例子，base64结果为“MTIz”。“123”长度为3个字节，正如上图第一行的框框表示的那样。然后在3个字节24个位，平均分割成4份，也就是以6位一份（8 x 3 = 6 x 4 = 24）。然后将4份6位的数据前面添加2个位且都为0。这样一来，就完成了3个字节变4个字节的操作了。因为是6个位，所以 2 的 6 次方就是 64。刚好可以和前面提及的64个字符对应得上。例子中的第一个字节 00001100 转成 10 进制也就是 12 ，也就是 “M” 的位置，所以第一个字节转换成了 “M”。第二个字节 00010011 转成 10 进制也就是 19，可以和 “T” 的位置对应得上。后面 2 个字节也是相同的道理，在这里就不多赘述了，读者可自己验证一下。

也正是因为 Base64 会把 3 个字节转成 4 个字节，所以数据才会是原来数据长度的 4 / 3。

到了这里，你可能还会有疑惑，就是，你可能见过结尾带 “=” （等于号）的 Base64 字符串情况。那下面我就继续用例子说明。

首先，我们知道 Base64 是 3 个字节转 4 个字节的，但是，不是所有的数据长度都是刚好是 3 的倍数，所以就需要用到“=”（等于号）来在后面进行填充。

以 “1” 为例子，经过 Base64 转换后得到 “MQ==”，为什么会这样呢？因为，”1″ 只是占 1 个字节，不够 3 个字节来转 4 个字节，所以就需要 “=”（等于号）来填充后面两个没有缺少的字节，来确保是 4 个字节。从这里可以看出 Base64 字符串长度都是偶数，并且是 4 的整数倍。

三、代码

1. function encodeUint8ArrayToBase64(u8a){
   
2.     var LIST = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
   
3.     var s = "";
   
4.     for(var i = 0;i<u8a.length;i += 3){
   
5.         s += LIST[(u8a[i] & 0b11111100) >> 2];
   
6.         if(typeof(u8a[i+1])=="undefined"){
   
7.             s += LIST[((u8a[i] & 0b00000011) << 4)];
   
8.             s += "==";
   
9.         }else{
   
10.             s += LIST[((u8a[i] & 0b00000011) << 4) + ((u8a[i+1] & 0b11110000) >> 4)];
    
11.             if(typeof(u8a[i+2])=="undefined"){
    
12.                 s += LIST[((u8a[i+1] & 0b00001111) << 2)];
    
13.                 s += "=";
    
14.             }else{
    
15.                 s += LIST[((u8a[i+1] & 0b00001111) << 2) + ((u8a[i+2] & 0b11000000) >> 6)];
    
16.                 s += LIST[(u8a[i+2] & 0b00111111)];
    
17.             }
    
18.         }
    
19.     }
    
20.     return s;
    
21. }

复制代码

jj198307

哇，五明，但你好专业

风格

多谢老师讲解

wai008

這位同學的功課作業雖然不夠詳細, 但也算不錯. 作業中, 不知導師的評分如何呢?

當中最顯眼出錯的地方, 我就說一下, 其他就不詳講了, 因為文中解釋不盡.
首先, 樓主對26個英文字母都不認真熟識, 常聽人說, 現在大學生連26字母都可以記錯, 原來是真的

ABCDEFGHIJKLMNOPQRSTUVWXYZ, 樓主不要以為MN倒轉是少事, M是排在13位, N是14位, 26個字對應數字用途非常廣泛, 有好多地方是可用來計算輸入資料有無錯誤的程式, 在此也不詳盡

另外一點小錯是小階英文, xyz , 樓主打了 xyx

樓主的 function 應該是網上抄來的, 當中的英文次序是正確的

神之影

不明觉厉！

希索加

体都唔系好明白讲咩

vx2240w

原來Base64原理咁複雜架,我真係睇唔明啵

logiciel

作為普通用家,上邊理論太pro,用家關注嘅係「點樣用一部老爺機可以睇高解析度嘅網路圖片」淨上邊理論可以幫到手嘅基本係冇可能！

作為網路／網站設計等高階用家，上邊理論就好似上堂講書！實作點解決「點樣用一部老爺機可以睇高解析度嘅網路圖片」，base64並唔係一個好嘅選擇，無論係CSS或html....

4547830

哗好高级阿，学下野先

RommHui

wai008 发表于 2021-7-16 10:06
這位同學的功課作業雖然不夠詳細, 但也算不錯. 作業中, 不知導師的評分如何呢?

當中最顯眼出錯的地方,  ...

多谢你嘅指正，function先係我自己按照原理寫的，字母那張圖我應該是在別處找的，不過自己真的不太小心，沒有檢查清楚就放上去