js手札--圖片的Base64編碼

junfeng777 發(fā)布于2019-08-21 11:37 / 1574人閱讀

摘要：一編碼在聊圖片編碼之前，先來說說編碼，其實這一塊已經有很多例子了。一次連接又是域名解析，開啟連接，發(fā)送請求，等待網絡延遲和服務器處理時間，下載資源較小是幾個意思

一、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==

圖片的Base64編碼

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

/**
  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連接，發(fā)送請求，等待（網絡延遲和服務器處理時間），下載資源

較小是幾個意思

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

GPU云服務器云服務器 base64編碼c語言 base64圖片生成 js webrtc base64 js base64數據顯示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86927.html

前端臨床手札——webpack構建逐步解構（上）

摘要：前言由于博主最近又閑下來了，之前覺得的官方文檔比較難啃一直放到現在。文章會逐步分析每個處理的用意當然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會補上構建生產的配置分析，案例參考。前端臨床手札構建逐步解構下前言由于博主最近又閑下來了，之前覺得webpack的官方文檔比較難啃一直放到現在。細心閱讀多個webpack配置案例后覺得還是得自己寫個手腳架，當然這個案例是基于vue的，...

lowett 2019-08-22 10:36 評論0 收藏0
【freemaker實現導出word③】詳解將echarts的圖片到出到word

摘要：前面介紹了導出到的代碼實現，詳見這里，里面有一部分涉及導出圖片到，在這里我再另外做一個詳細的介紹。在前臺用將生成的圖片轉成編碼，提交給后臺。前面介紹了導出到word的代碼實現，詳見這里，里面有一部分涉及導出圖片到word，在這里我再另外做一個詳細的介紹。是這樣的，我項目有個功能，里面就涉及到要將echarts形成的柱狀圖或者地圖之類的圖表導出到word，在網上找了很久，都是說將圖片轉...

flyer_dev 2019-08-21 17:15 評論0 收藏0
【freemaker實現導出word③】詳解將echarts的圖片到出到word

摘要：前面介紹了導出到的代碼實現，詳見這里，里面有一部分涉及導出圖片到，在這里我再另外做一個詳細的介紹。在前臺用將生成的圖片轉成編碼，提交給后臺。前面介紹了導出到word的代碼實現，詳見這里，里面有一部分涉及導出圖片到word，在這里我再另外做一個詳細的介紹。是這樣的，我項目有個功能，里面就涉及到要將echarts形成的柱狀圖或者地圖之類的圖表導出到word，在網上找了很久，都是說將圖片轉...

endless_road 2019-08-15 12:21 評論0 收藏0
SphinxJS——把字符串編碼成png圖片的超輕量級開源庫

摘要：體驗地址項目地址一個能夠把字符串編碼成圖片，或者從圖片中解碼出字符串的超輕量級開源庫，總代碼數甚至不超過行使用方法通過安裝通過標簽引入值得注意的是，因為使用了的以及其他很棒的特性，這意味著需要你的瀏覽器提供支持。 showImg(https://segmentfault.com/img/bVC6vf?w=172&h=209); 體驗地址：https://jrainlau.github....

Barrior 2019-08-22 10:39 評論0 收藏0