图片转Base64

目录

一、了解图片转Base64

1、为什么要将图片转为base64编码而不是直接传图片的url地址

2、使用前提

3、使用Base64也不代表性能优化

4、简单使用Base64

---

一、了解图片转Base64

1、为什么要将图片转为base64编码而不是直接传图片的url地址

     --> 最主要的原因是这样可以减少http请求次数：我们常见的网页都是基于http协议的，网页所见的各个图片都需要相应次数的http请求将它下载出来的，若是随着html下载同时下载到本地便可以减少http请求次数

    --> 网速不好的时候，可以先于内容加载：将编码成base64的图片置于css中，而css代码又一般是在html头部加载的，其加载顺序先于下面内容

    -->可以像单独图片一样使用，而且对于同一张图片应用地方多，可以放入公共common块中

    -->没有跨域问题，无需考虑缓存、文件头或者cookies问题

2、使用前提

    --> 被base64编码的图片要足够小的尺寸：因为将图片生成的base64字符串编码一般而言都会比原文件大一些，即使能被gzip压缩，但是css样式代码中要写一大版的base64编码字符难看，消耗的是css文件体积

3、使用Base64也不代表性能优化

    --> 使用Base64减少一个图片的http请求的同时Css文件就会付出体积增大的代价

    --> 文件体积增大意味着CRP的阻塞

CRP（Critical Rendering Path，关键渲染路径）：当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”。 

因为CRP是重点是针对HTML页面请求的，图片是不会导致CRP阻塞，但是被转换成Base64的图片会增加Css文件的体积，进而Css文件来直接影响页面渲染，导致空白页面显示时间变长

    --> 页面解析CSS生成的CSSOM时间增加

CSS 对象模型（CSSOM）：CSSOM是一个建立在web页面上的CSS样式的映射，它和DOM类似，但是只针对CSS而不是HTML

 简言之，CSSOM阻止任何东西渲染，而在解析HTML过程中，头部有link一个Css样式，这时Css没解析处理完成之前是不会展示的，但是随着Base64编码导致Css文件增大，则让Css解析时间变长更影响渲染

4、简单使用Base64

后台工具类封装:

 //64编码
    public static String imgEncode(String imgPath) throws IOException {

        FileInputStream in = null;
        byte[] bytes = null;
        String encode = null;

        //64编码对象Encoder
        BASE64Encoder encoder = new BASE64Encoder();

        //1.获取图片读入内存
        in = new FileInputStream(imgPath);
        //2.将图片转成字节数组
        bytes = new byte[in.available()];
        //3.对字节数组进行Base64编码
        encode = encoder.encode(bytes);

        in.close();

        return encode;
    }

    //64解码 --> 保存到路径
    public static boolean imgShow(String encode, String outPath) throws IOException {

        if(encode == null){
            return false;
        }

        //64解码对象Decoder
        BASE64Decoder decoder = new BASE64Decoder();

        FileOutputStream out = new FileOutputStream(outPath);
        byte[] b = decoder.decodeBuffer(encode);
        for(int i=0; i<b.length; i++){
            if(b[i]<0){     //调整异常数据（注意？）
                b[i] += 256;
            }
        }
        out.write(b);
        out.flush();
        out.close();
        return true;
    }

前台接收应用：

  使用前缀：data:image/图片后缀;base64,..........编码

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
  //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />