Base64圖片編碼原理，base64圖片工具介紹，圖片在線轉換Base64
DataURI 允許在HTML文檔中嵌入小文件，可以使用 img 標簽或 CSS 嵌入轉換后的 Base64 編碼，減少 HTTP 請求，加快小圖像的加載時間。
經過Base64 編碼后的文件體積一般比源文件大 30% 左右。
// Base64 在CSS中的使用
.box{ background-image: url("data:image/jpg;base64,/9j/4QMZR..."); } // Base64 在HTML中的使用 <img src="data:image/jpg;base64,/9j/4QMZR..." />
圖片在線轉換Base64,圖片編碼base64
https://www.css-js.com/tools/base64.html
支持Base64(DataURI)的瀏覽器
| | Chrome 4+ | |
| Android Chrome 57+ | ||
| | Firefox 2+ | |
| Android Firefox 52+ | ||
| | Safari 3.1+ | |
| IOS Safari 3.2+ | ||
| | Opera 9+ | Opera9~11 限制為 64K |
| | IE 8+ | IE8 限制為 32KB |
| Mobile IE10+ | ||
| | Edge12+ | |
| | Android UC11+ | |
| | QQ Browser1.2+ |
base64圖片編碼大小與原圖文件大小之間的聯系
有時候我們需要把canvas畫布的圖畫轉換成圖片輸出頁面，而用canvas生成的圖片就是base64編碼的，它是由數字、字母等一大串的字符組成的，但是我們需要獲取它的文件流大小該怎么辦呢？
Base64圖片編碼原理：
Base64編碼要求把3個8位字節（3*8=24）轉化為4個6位的字節（4*6=24），之后在6位的前面補兩個0，形成8位一個字節的形式。 如果剩下的字符不足3個字節，則用0填充，輸出字符使用’=’，因此編碼后輸出的文本末尾可能會出現1或2個’=’
詳情請閱讀- base64原理 本地圖片base64編碼及大小[h5]
http://gj.3gwen.com/tpbase64.html?kbl=
- Base64是網絡上最常見的用於傳輸8Bit字節代碼的編碼方式之一，Base64編碼可用於在HTTP環境下傳遞較長的標識信息。采用Base64編碼具有不可讀性，即所編碼的數據不會被人用肉眼所直接看到。
- 在MIME格式的電子郵件中，base64可以用來將binary的字節序列數據編碼成ASCII字符序列構成的文本。使用時，在傳輸編碼方式中指定base64。使用的字符包括大小寫字母各26個，加上10個數字，和加號“+”，斜杠“/”，一共64個字符，等號“=”用來作為后綴用途。
- Base64編碼要求把3個8位字節（3*8=24）轉化為4個6位的字節（4*6=24），之后在6位的前面補兩個0，形成8位一個字節的形式。 如果剩下的字符不足3個字節，則用0填充，輸出字符使用'='，因此編碼后輸出的文本末尾可能會出現1或2個'='。
- 為了保證所輸出的編碼位可讀字符，Base64制定了一個編碼表，以便進行統一轉換。編碼表的大小為2^6=64，這也是Base64名稱的由來。
base64圖片工具介紹
- 支持 PNG、GIF、JPG、BMP、ICO 格式。
- 支持查看圖片的具體大小。上傳過程無需網絡。
- 將圖片轉換為Base64編碼，可以讓你很方便地在沒有上傳文件的條件下將圖片插入其它的網頁、編輯器中。 這對於一些小的圖片是極為方便的，因為你不需要再去尋找一個保存圖片的地方。
- 假定生成的代碼為“data:image/jpeg;base64, .....”，那么你只需要全部復制，然后在插入圖片的時候，地址填寫這段代碼即可。
- CSS中使用：
background-image: url("data:image/png;base64,iVBORw0KGgo=...");
- HTML中使用：
<img src="data:image/png;base64,iVBORw0KGgo=..." />
- 圖片轉換Base64，無線開發、HTML5、CSS3必備的工具，CSS DataURI Base64 工具。
- 將圖片轉換成base64編碼的，在web網上一般用於小圖片上，不僅可以減少圖片的請求數量（集合到js、css代碼中），還可以防止因為一些相對路徑等問題導致圖片404錯誤。
當我們知道base64編碼的圖片的字符大小，怎么計算圖片的文件流大小呢？？
通過base64編碼原理我們知道，base64的圖片字符流中的每8個字符就有兩個是用0補充，而且字符流的末尾還可能存在‘=’號，我們可以通過這個原理計算圖片的文件流大小。
下面舉例：
這是一張圖片的base64編碼：
data:image/png;base64,AAAB.....
AAA==
為了方便，我們用str代替上面編碼。
1.需要計算文件流大小，首先把頭部的data:image/png;base64,（注意有逗號）去掉。
var str = base64pic.split(",")[1];
2.找到等號，把等號也去掉
var equalIndex= str.indexOf(‘=’);
if(str.indexOf(‘=’)>0)
{
str=str.substring(0, equalIndex);
}
3.原來的字符流大小，單位為字節
var strLength=str.length;
4.計算后得到的文件流大小，單位為字節
var fileLength=parseInt(strLength-(strLength/8)*2);