使用Data URI scheme方式向前端傳BASE64格式圖片

最近項目中用到向前端返回圖片用了“data:image/png;base64”格式。涉及到幾個點,第一個是 Data URI scheme,第二個是Base64編碼,第三個是計算機內存字節序的大端表示法和小端表示法。

“data:image/png;base64”這種方式是 Data URI scheme。以下是轉載內容data:image/png;base64的用法詳解淺析data:image/png;base64的應用

那麼這是什麼呢?這是Data URI scheme。

Data URI scheme是在RFC2397中定義的,目的是將一些小的數據,直接嵌入到網頁中,從而不用再從外部文件載入。比如上面那串字符,其實是一張小圖片,將這些字符複製黏貼到火狐的地址欄中並轉到,就能看到它了,一張1X36的白灰png圖片。

在上面的Data URI中,data表示取得數據的協定名稱,image/png 是數據類型名稱,base64 是數據的編碼方法,逗號後面就是這個image/png文件base64編碼後的數據。 目前,Data URI scheme支持的類型有:

格式 含義
data 文本數據
data:text/plain 文本數據
data:text/html HTML代碼
data:text/html;base64 base64編碼的HTML代碼
data:text/css CSS代碼
data:text/css;base64 base64編碼的CSS代碼
data:text/javascript Javascript代碼
data:text/javascript;base64 base64編碼的Javascript代碼
data:image/gif;base64 base64編碼的gif圖片數據
data:image/png;base64 base64編碼的png圖片數據
data:image/jpeg;base64 base64編碼的jpeg圖片數據
data:image/x-icon;base64 base64編碼的icon圖片數據

優點:   

  • 減少HTTP請求數,沒有了TCP連接消耗和同一域名下瀏覽器的併發數限制。
  • 對於小文件會降低帶寬。雖然編碼後數據量會增加,但是卻減少了http頭,當http頭的數據量大於文件編碼的增量,那麼就會降低帶寬。
  • 對於HTTPS站點,HTTPS和HTTP混用會有安全提示,而HTTPS相對於HTTP來講開銷要大更多,所以Data URI在這方面的優勢更明顯。
  • 可以把整個多媒體頁面保存爲一個文件。

缺點:   

  • 無法被重複利用,同一個文檔應用多次同一個內容,則需要重複多次,數據量大量增加,增加了下載時間。
  • 無法被獨自緩存,所以其包含文檔重新加載時,它也要重新加載。
  • 客戶端需要重新解碼和顯示,增加了點消耗。
  • 不支持數據壓縮,base64編碼會增加1/3大小,而urlencode後數據量會增加更多。
  • 不利於安全軟件的過濾,同時也存在一定的安全隱患。

簡言之,就是可以將“data:image/png;base64”這種數據直接放到 html 代碼中,不用像之前放的是一個鏈接,需要再次請求服務器資源。

第二個是Base64編碼。Base64編碼之前接觸過多次,就是將字節數據轉換成64個符號表示的數據,這64個符號有一個符號表。這裏字節轉換成Base64符號,一個字節是 8 bit,而一個 Base64 符號是 6 bit,這樣,三個字節的數據恰好可以轉換成四個 Base64 符號。具體轉換方式見下邊代碼。

第三個是字節在內存中大端存儲和小端存儲。以下爲轉載內容。字節序:大端法和小端法

字節序即爲多字節對象存儲在內存中的字節順序,有兩種不同的存儲方案:大端法和小端法。現代的處理器大多爲雙端法,大小端都支持,可以配置稱大端法或者小端法。

大端法

最高有效字節在最前面的方式稱爲大端法,例如假設變量x類型爲int型,位於地址0x100的地方,其16進制值爲0x12345678,地址範圍爲0x100到0x103字節。

對於大端法的機器來說:

0x100 0x101 0x102 0x103
12 34 56 78

由上圖可見,地址從左向右增長,x的最高有效字節12在最前面存儲。這正好和我們平時書寫習慣一致,先書寫最高有效字節,再依次寫其餘字節。

小端法

最低有效字節在最前面的方式成爲小端法,這正好和大端法相反,仍然用大端法中舉的例子說明:

0x100 0x101 0x102 0x103
78 56 34 12

由上圖可見,地址依然從左向右增長,x的最低有效字節在最前面存儲,與大端法相反。

講大端,小端表示法是因爲圖片使用的是小端表示法,所以將圖片數據轉爲 Base64 格式時要將數據順序反過來。具體見代碼。

package cn.picclife.cust.rrd.util;

import java.io.IOException;

import cn.picclife.cust.integration.face.util.ImageBizUtil;
import sun.misc.BASE64Decoder;

/**
 * Base64 編碼判斷工具
 */
public class Base64Util {
    private static final char last2byte = (char) Integer.parseInt("00000011", 2);
    private static final char last4byte = (char) Integer.parseInt("00001111", 2);
    private static final char last6byte = (char) Integer.parseInt("00111111", 2);
    private static final char lead6byte = (char) Integer.parseInt("11111100", 2);
    private static final char lead4byte = (char) Integer.parseInt("11110000", 2);
    private static final char lead2byte = (char) Integer.parseInt("11000000", 2);
    private static final char[] encodeTable = new char[] {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
            'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
            'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
            'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6',
            '7', '8', '9', '+', '/'};

    public Base64Util() {}

    public static String encode(byte[] from) {
        StringBuilder to = new StringBuilder((int) ((double) from.length * 1.34D) + 3);
        int num = 0;
        char currentByte = 0;

        int i;
        for (i = 0; i < from.length; ++i) {
            for (num %= 8; num < 8; num += 6) {
                switch (num) {
                    //取第 0,3,6,9...個字節的前 6 位 bit 轉爲 base64 字符
                    case 0:
                        currentByte = (char) (from[i] & lead6byte);
                        currentByte = (char) (currentByte >>> 2);
                    case 1:
                    case 3:
                    case 5:
                    default:
                        break;
                    //取字節後 6 位轉換
                    case 2:
                        currentByte = (char) (from[i] & last6byte);
                        break;
                    case 4:
                        currentByte = (char) (from[i] & last4byte);
                        currentByte = (char) (currentByte << 2);
                        if (i + 1 < from.length) {
                            currentByte = (char) (currentByte | (from[i + 1] & lead2byte) >>> 6);
                        }
                        break;
                    case 6:
                        currentByte = (char) (from[i] & last2byte);
                        currentByte = (char) (currentByte << 4);
                        if (i + 1 < from.length) {
                            currentByte = (char) (currentByte | (from[i + 1] & lead4byte) >>> 4);
                        }
                }

                to.append(encodeTable[currentByte]);
            }
        }

        if (to.length() % 4 != 0) {
            for (i = 4 - to.length() % 4; i > 0; --i) {
                to.append("=");
            }
        }

        return to.toString();
    }

    /**
     * 
    * @Title: imageSize 
    * @Description: 判斷字符流大小 
    * @param  @param image base64長度
    * @param  @return
    * @return Integer    返回類型 
    * @date 2018年4月12日 上午9:51:48
    * @throws
     */
    public static Integer imageSize(String image) {
        String str = image.substring(22); // 1.需要計算文件流大小,首先把頭部的data:image/png;base64,(注意有逗號)去掉。
        Integer equalIndex = str.indexOf("=");// 2.找到等號,把等號也去掉
        if (str.indexOf("=") > 0) {
            str = str.substring(0, equalIndex);
        }
        Integer strLength = str.length();// 3.原來的字符流大小,單位爲字節
        return strLength;
    }

    public static void main(String[] args) {
        String m = "123456789123456789123422222";
        String b = m.substring(22);
        System.out.println(b);
    }

    /**
     * 
    * @Title: base64ToIo 
    * @Description: 轉換文件流 壓縮 
    * @param  @param strBase64
    * @param  @return
    * @return byte[]    返回類型 
    * @date 2018年4月12日 上午9:44:49
    * @throws
     */
    public static byte[] base64ToIo(String strBase64) {
        String string = strBase64;
        byte[] newbytes = null;
        try {
            // 解碼,然後將字節轉換爲文件
            byte[] bytes = new BASE64Decoder().decodeBuffer(string); // 將字符串轉換爲byte數組
            newbytes = ImageBizUtil.imageZip(bytes, 1440, 1080);
        } catch (IOException ioe) {
            ioe.printStackTrace();
        }
        return newbytes;
    }

    /**
     * 
    * @Title: base64ToIo 
    * @Description: 原始轉換
    * @param  @param strBase64
    * @param  @return
    * @return byte[]    返回類型 
    * @date 2018年4月12日 上午9:44:49
    * @throws
     */
    public static byte[] base64ToIoBase(String strBase64) {
        String string = strBase64;
        byte[] bytes = null;
        try {
            // 解碼,然後將字節轉換爲文件
            bytes = new BASE64Decoder().decodeBuffer(string); // 將字符串轉換爲byte數組
        } catch (IOException ioe) {
            ioe.printStackTrace();
        }
        return bytes;
    }
}


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章