目录
1、为什么要将图片转为base64编码而不是直接传图片的url地址
一、了解图片转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" />