Base64圖片編碼的使用

1、base64編碼介紹

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名稱的由來。

2、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，無線開發、HTML五、CSS3必備的工具，CSS DataURI Base64 工具。
將圖片轉換成base64編碼的，在web網上通常用於小圖片上，不只能夠減小圖片的請求數量（集合到js、css代碼中），還能夠防止由於一些相對路徑等問題致使圖片404錯誤。

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

Base64編碼要求把3個8位字節（3*8=24）轉化爲4個6位的字節（4*6=24），以後在6位的前面補兩個0，造成8位一個字節的形式。 若是剩下的字符不足3個字節，則用0填充，輸出字符使用’=’，所以編碼後輸出的文本末尾可能會出現1或2個’=’經過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==

1.須要計算文件流大小，首先把頭部的data:image/png;base64,（注意有逗號）去掉。

str=str.substring(22);

2.找到等號，把等號也去掉

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

3.原來的字符流大小，單位爲字節

int strLength=str.length();

4.計算後獲得的文件流大小，單位爲字節

int fileLength=strLength*3/4;

5.輸出文件流大小

System.out.println(fileLength);

完整例子以下：

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;

import org.apache.commons.codec.binary.Base64;

public class TestBase64 {
    //java將圖片轉base64代碼示例
    public static String encodeBase64File(String filePath){
        File file = new File(filePath);
        FileInputStream inputFile = null;
        try {
            inputFile = new FileInputStream(file);
            byte[] buffer = new byte[(int) file.length()];
            inputFile.read(buffer);
            inputFile.close();
            String code = new String(Base64.encodeBase64(buffer));
            return code;
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            if(inputFile != null){
                try {
                    inputFile.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            
        }
        return null;
    }
    public static void main(String[] args) {
        String str="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=str.substring(22);
        int equalIndex= str.indexOf('=');
        if(str.indexOf('=')>0)
        {
            str=str.substring(0, equalIndex);
        }
        int strLength=str.length();
        int fileLength=strLength*3/4;
        System.out.println(fileLength);
    }
    
}

最好看下大小差異：