使用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;
    }
}


发布了35 篇原创文章 · 获赞 14 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/U___U/article/details/105029542
URI