js手札--圖片的Base64編碼

1、Base64編碼

在聊圖片編碼以前，先來講說Base64編碼，其實這一塊已經有不少例子了。

Base64編碼麼，其實就是一個招待好6爺，伺候好8爺的過程

Base64是把字符串轉爲二進制，而後末尾補零，使總長度能除盡24

24這個太上皇怎麼來的：是6爺與8爺的公倍數

6爺怎麼來的: Base64是一個對照表，有64個符號，大小寫字母，數字，加號，斜槓（/）。特殊字符（=）除外能夠用6個二進制位來表示這個64個字符

8爺怎麼來的：一個字符8位(ASCII碼對應二進制)

1.Base64是由於有64個字符來作對照，因此，能夠用6個二進制位數來表示（編碼事後的字符）：如：

『000000』表明A，『111111』表明/

2.因此嘛，咱們須要作的就是把要編碼的字符（一個字符8位，對照ASCII）6等分，這樣好用Base64來表示，如：

A => 『01000001』=>（6等分）  『010000』『01』

3.但你也看到了，最後的不足6位啊，那沒問題，補零，就好了

『010000』『010000』

4.這樣的東東，在Base64中是能找到對應的值，可是，我要把他在轉換成正確的字符A就不行了

『010000010000』=> A『0000』

5.缺了4位，那咋辦，那就再添加4位咯

『010000010000』=> 『010000』『010000』『0000』

6.但加了4位又不能用Base64來表示了，少了2位，唉，既要伺候好6爺，又得服侍好8爺真心不容易啊，其實添了2仍是不行的，反正就是這麼補0下去，最後就變成了

『010000』『010000』『000000』『000000』

用Base64一對照看到是（0用=表示）QQ==

OK

圖片的Base64編碼

例如：url：data:text/jpeg;base64,XXXXXXX==

data:[<mime-type>];[<chartset>=chartset];[<encoding>],<encoded_data>

/**
  data:font/woff，字體
  data:text/plain,文本數據
  data:text/html,HTML代碼
  data:text/css;base64,css代碼
  data:text/javascript;base64,javascript代碼
  data:image/x-icon;base64,base64編碼的icon圖片數據
  data:image/gif;base64,base64編碼的gif圖片數據
  data:image/png;base64,base64編碼的png圖片數據
  data:image/jpeg;base64,base64編碼的jpeg圖片數據
*/
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}

特色

• 不像訪問圖片地址那樣緩存起來，而是直接存在css/js中,隨着css/js緩存的

• 因爲是base64編碼的，通常都比原圖片要大1/3（故而通常得配合gzip壓縮）

解決啥？

• 減小對服務器的請求（這裏帶出一個問題--爲何要減小對服務器的請求？）

缺點

• IE8以前都不會支持（須要hack技術，但IE9的IE7兼容模式能夠）

適用

• 圖片比較小（這個較小又是幾個意思？），若是圖片過大，會致使css或者js文件過大，而致使阻塞

同類

• Image maps

• css sprites

題外話

爲何要減小對服務器的請求？

• 1.請求頭420byte和返回頭600多比特確定少不了的，此外請求還可能會攜帶。

• 2.一次http鏈接又是：域名解析，開啓TCP鏈接，發送請求，等待（網絡延遲和服務器處理時間），下載資源

較小是幾個意思

http://www.jianshu.com/p/486f...