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

2024-04-27 15:13:28

字體：大中小

來源：轉載

供稿：網友

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,（注意有逗號）去掉。

str=str.substring(22);

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);

5.輸出文件流大小

alert(fileLength);

以上是文章的主要內容，有問題請多多交流