base64圖片編碼大小與原圖文件大小之間的聯繫

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編碼的圖片的字符大小，怎麼計算圖片的文件流大小呢？？

經過base64編碼原理咱們知道，base64的圖片字符流中的每8個字符就有兩個是用0補充，並且字符流的末尾還可能存在‘=’號，咱們能夠經過這個原理計算圖片的文件流大小。

下面舉例：

這是一張圖片的base64編碼：

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

爲了方便，咱們用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);

 

推薦一個文件流圖片轉base64編碼流圖片的在線工具- base64轉換

轉載： http://blog.csdn.net/chenyejunjun/article/details/54924355