Base64原理解析


Base64是基於64個字符進行轉換的,由於2的6次方正好爲64,因此6bit就能夠表示出64個字符,所以在轉換的過程當中以6bit表示一個字符。javascript


原理:css

3x8=4x6,核心是這個公式html

  1. base64的編碼都是按字符串長度,以每3個8bit的字符爲一組
  2. 針對每組,首先獲取每一個字符的ASCII編碼值
  3. 將ASCII編碼轉換成8bit的二進制,獲得一組3*8=24bit的字節
  4. 再將這24bit劃分爲4個6bit的字節,並在每一個6bit的字節前面都填兩個高位0,獲得4個8bit的字節
  5. 將這4個8bit的字節轉換成10進制,對照Base64編碼表,獲得對應編碼後的字符

ASCII表
圖片描述java

Base64編碼表
圖片描述編程

案例工具

  • 字符串長度能被3整除的:好比 wen
w           e          n
ASCII:  119         101        110
8bit:  01110111   01100101   01101110
6bit:  011101  110110  010101  101110
十進制:  29      54      21      46
Base64:   d     2       V       u

因此 "wen" ---- > d2Vu
  • 字符串長度不能被3整除時,好比:jiang
j          i           a          n           g
ASCII:  106        105         97          110         103
8bit:  01101010   01101001   01100001   01101110     01100111
6bit:  011010  100110  100101  100001  011011 100110  011100  異常
十進制:  26      38      37      33       27     38    28
Base64:  a       m       l      h         b      m     c      =

因此 "jiang" ---- > amlhbmc=

注意:Base64是四個字符爲一組,不夠的補=網站

工具網站:
進制轉換
Base64轉換工具
圖片轉base64編碼

漢字轉Base64spa

這裏須要注意,漢字自己能夠有多種編碼,好比gb23十二、utf-八、gbk等等,每一種編碼的Base64對應值都不同。下面的例子以utf-8爲例code

utf-8E4B8A5,寫成二進制就是三字節的11100100 10111000 10100101,而後按照上面的規則轉換獲得Base64 編碼爲:5Lil

因此,漢字嚴(utf-8編碼)的Base64值就是5Lil

從上面英語字母或者漢字轉換爲Base64的來看,就是先轉換爲對應的編碼的二進制,而後在進行轉換

補充內容

對於一張圖片,咱們進程看到這樣的表達形式:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAA....

這是這是Data URI scheme目的是將一些小數據,直接嵌入到網頁中,而不用在引用外部

在上面data表示取得數據的協定名稱,image/png 是數據類型名稱,base64 是數據的編碼方法,逗號後面就是這個image/png文件base64編碼後的數據

Data URI scheme支持的類型有:

  • data:,文本數據
  • data:text/plain,文本數據
  • data:text/html,HTML代碼
  • data:text/html;base64,base64編碼的HTML代碼
  • data:text/css,CSS代碼
  • data:text/css;base64,base64編碼的CSS代碼
  • data:text/javascript,Javascript代碼
  • data:text/javascript;base64,base64編碼的Javascript代碼
  • data:image/gif;base64,base64編碼的gif圖片數據
  • data:image/png;base64,base64編碼的png圖片數據
  • data:image/jpeg;base64,base64編碼的jpeg圖片數據
  • data:image/x-icon;base64,base64編碼的icon圖片數據

圖片描述

掃描關注,查看更多文章,提升編程能力

相關文章
相關標籤/搜索