base64編碼以及在圖片中的使用詳解

1静陈、概念：base64是指用64個(gè)基本的ASCII碼字符對數(shù)據(jù)進(jìn)行重新編碼

2螟碎、編碼字符表ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/，包括26個(gè)大寫英文字母倍谜、26個(gè)小寫英文字母、10個(gè)數(shù)字尔崔、加號“+”褥民、斜杠“/”共64個(gè)字符，而等號“=”則用來作為后綴用途

3载弄、編碼規(guī)則

（1）base64將需要編碼的數(shù)據(jù)拆分成字節(jié)數(shù)組，以3個(gè)字節(jié)為一組
（2）按順序排列24位（1byte=8bit）數(shù)據(jù)
（3）把24位數(shù)據(jù)分成4組宇攻，每組6位，并在每組的最高位前補(bǔ)兩個(gè)0湊足一個(gè)字節(jié)嘉涌。這樣就把一個(gè)3字節(jié)為一組的數(shù)據(jù)重新編碼成了4個(gè)字節(jié)
（4）當(dāng)所要編碼的數(shù)據(jù)的字節(jié)數(shù)不是3的整倍數(shù)時(shí)仑最，即在分組時(shí)最后一組不夠3個(gè)字節(jié)，這時(shí)就在最后一組填充1到2個(gè)全0字節(jié)警医，并在最后編碼完成后在結(jié)尾添加1到2個(gè)“=”坯钦，因此常常看到編碼后輸出的文本末尾可能會出現(xiàn)1或2個(gè)“=”

4深啤、解碼規(guī)則

解碼過程就是把4個(gè)字節(jié)再還原成3個(gè)字節(jié)路星，再根據(jù)不同的數(shù)據(jù)形式把字節(jié)數(shù)據(jù)重新整理成數(shù)據(jù)

5洋丐、舉個(gè)栗子

對ABC進(jìn)行base64編碼挥等，步驟如下：
（1）首先取ABC對應(yīng)的ASCII碼值：A（65）、B（66）迁客、C（67）
（2）再取二進(jìn)制值：A（01000001）B（01000010）C（01000011）
（3）把3個(gè)字節(jié)的二進(jìn)制碼鏈接起來作為一組：010000010100001001000011
（4）再以6位為一組辞槐，分成4組數(shù)據(jù)，并在最高位前補(bǔ)兩個(gè)0湊足一個(gè)字節(jié)：（00010000）（00010100）（00001001）（00000011）卜范，其中加粗部分為真實(shí)數(shù)據(jù)
（5）再把4個(gè)字節(jié)數(shù)據(jù)轉(zhuǎn)換成10進(jìn)制數(shù)：（16）（20）（9）（3）
（6）最后根據(jù)base64字符表，查找對應(yīng)的ASCII碼字符：（Q）（U）（J）（D）海雪，這里的值實(shí)際就是數(shù)據(jù)在字符表中的索引，且索引從0開始

6奥裸、base64支持的圖片格式：PNG、GIF樟氢、JPG、BMP嗡害、ICO

7畦攘、base64對于圖片編碼的使用：

（1）在CSS中的使用：background-image: url("data:image/jpg;base64,/9j/4QMZR...")
（2）在HTML中的使用：<img src="data:image/jpg;base64,/9j/4QMZR..." />

8、base64圖片編碼與原始圖片大小關(guān)系

Base64編碼要求把3個(gè)8位字節(jié)（38=24）轉(zhuǎn)化為4個(gè)6位的字節(jié)（46=24）叹螟，之后在6位的前面補(bǔ)兩個(gè)0台盯，形成8位一個(gè)字節(jié)的形式。如果剩下的字符不足3個(gè)字節(jié)良价，則用0填充蒿叠，輸出字符使用’=’，因此編碼后輸出的文本末尾可能會出現(xiàn)1或2個(gè)’=’痊银，由base64編碼原理我們知道，base64的圖片字符流中的每8個(gè)字符就有兩個(gè)是用0補(bǔ)充溯革，而且字符流的末尾還可能存在‘=’號谷醉，我們可以通過這個(gè)原理計(jì)算圖片的文件流大小。豺裆，以下面base64編碼為例詳解編碼后圖片與原始圖片的大小關(guān)系，如：

data:image/png;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAB9SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/6mHbP+LXDf/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//i104/5lwT/+RZkP/fksh/6eFaP/8/Pv/mG9N/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/+tjHL/6uHb//7+/v////////////Xx7v/8+/r//////6N/Yv99SR//fUkf/31JH/99SR//fUkf/35LIf/PvK3///////////////////////////////////////////+vj3b/fUkf/31JH/99SR//fUkf/31JH/++pI/////////////08Oz/vqSQ/8y3p///////////////////////u6CK/31JH/99SR//fUkf/31JH/+IWDL/+vn3///////s5d//iVo1/6B7XP/6+ff/8Orl/9TDtv+5nYb/nXZX/4NRKf9+SyL/fUkf/31JH/99SR//sJF3////////////onxe/35LIv+ge1z/ils1/31JH/99SR//fUkf/6qIbf/dz8T/1MK0/31JH/99SR//fUkf/8WunP///////Pv7/39MIv99SR//fUkf/31JH/99SR//fUkf/31JH//ay7///////+ri2/99SR//fUkf/31JH//Frpv///////38+/9/TCP/fUkf/31JH/99SR//fUkf/31JH/99SR//2szA///////q4dv/fUkf/31JH/99SR//r491////////////pIBi/31JH/99SR//fUkf/31JH/99SR//hVUt//j29P//////1MK1/31JH/99SR//fUkf/4dXMP/59/b//////+7o4/+MXjn/fUkf/31JH/99SR//gE0k/9XFuP///////////6aDZ/99SR//fUkf/31JH/99SR//up+I////////////9vPw/8OrmP+si3D/uZ2G/+ri2////////////97Rx/99SiD/fUkf/31JH/99SR//fUkf/31KIP/KtqX//v7+/////////////////////////////////+Xb0/+HWDH/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/6eFaP/l2tL//v7+////////////8evn/7yhi/+BTyb/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/4dXMP+Uakf/jV86/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==

（1）把上述base64編碼存放在變量str中躺酒，計(jì)算文件流大小需要去掉頭部data:image/png;base64,（注意有逗號）

str = str.substring(22)     // 1536

或是：

str = str.split(",")[1]     // 1536

（2）找到等號“=”羹应，把等號去掉

var equalIndex = str.indexOf('=');
if(str.indexOf('=') > 0){
        str = str.substring(0, equalIndex);
}

（3）編碼后字符流大小次屠，單位為字節(jié)（一個(gè)英文字符為一個(gè)字節(jié)）

var strLength = str.length();     // 1534

（4）編碼后文件流大小，單位為字節(jié)

var fileLength = parseInt(strLength*3/4);     // 1150劫灶，可以通過 strLength/fileLength  = 4/3 進(jìn)行推導(dǎo)，并且注意1150只是字節(jié)數(shù)供汛，并不是所謂的文件大小表示方式中的KB

或是：

var fileLength = parseInt(strLength-(strLength/8)*2);      // 1150涌穆，編碼后的數(shù)據(jù)中每8位中就有2位是添加的0補(bǔ)位，因此所有的0補(bǔ)位總數(shù)為：(strLength/8)*2

9趁舀、總結(jié)

從以上編碼規(guī)則可以得知，通過base64編碼矮烹，原來的3個(gè)字節(jié)編碼后將成為4個(gè)字節(jié)罩锐，即字節(jié)增加了33.3%，數(shù)據(jù)量相應(yīng)變大。所以10M的數(shù)據(jù)通過base64編碼后大小大概為10M*133.3%=13.33M搬味。