本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发。
webp:文件最小,有透明通道。
jpg:文件较小,无透明通道。
png:文件较大,有透明通道。
1.小图标大多是不规则形状,显示时多会要求能看到后方背景,所以需要有透明通道,一般使用png。尺寸小,没必要转webp。
如果图标后方背景为纯色且确定,那么直接用jpg就可以了。
2.UI给的png图应当再通过tinypng或者“智图”将图标文件大小缩小一些再放入drawable文件夹中。
上传到“智图”,转成webp。
1.查友盟统计数据知道,市场主流屏幕为720p和1080p。
2.ui按1080p的尺寸来做设计图,在此基础上切一套图,放于xxhdpi下即可适配大多数屏幕了。
系统的图片裁剪被被各家厂商改得面目全非.试用了github的几家,发现ucrop是比较好的,基于此封装了一下:CropUtils
头像的裁剪效果:
系统内置的图片选择只支持选单图,于是很多人做出了多图选择的框架,但很多做得不纯粹,又有图片选择又有裁剪的,这个只做图片选择.
基于photoPicker修改了一下ui,做得类似微信,非常流畅:PhotoPicker
上传前根据期望的最终的显示大小进行压缩,压缩算法可参考:luban
为了便于拉取图片前就知道图片尺寸,上传所指定的图片路径中需带图片尺寸信息,比如 www.xxyy.com\landscape\jsjidsj-w-h-1080-1920.jpg.
服务器端要能够根据图片路径后方拼接的参数对图片进行处理后返回.
最常用的处理方式是:对原图缩小和裁剪,以及图片格式转换.
缩小和裁剪
比如,请求上面那张图片作为头像,头像组件的大小是80x80像素,那么可以:
www.xxyy.com\landscape\jsjidsj-w-h-1080-1920.jpg?imageMogr2/thumbnail/!80x80r/crop/80x80/
操作的意义是:限定短边,生成不小于80x80的缩略图:这时,会生成短边为80,长边为80*1920/1080.
然后,裁剪成80*80的图.(默认居中裁剪)
格式转换: 如果是用于动态更换的图标,那么保持原来的png格式.如果图片只用于展示,无需透明度,那么转换成jpg.
gif图片:七牛能够对gif图片进行缩略和剪切,也能转成jpg格式。
通过这两步步操作,能够将网络传输的流量最小化.省七牛的流量费,省用户的流量和加载时间.
封装的工具类: github地址
三级缓存框架内部已经实现,无需赘言.
其具体的使用技巧见博客:
Fresco图片加载框架的介绍,相关开源库以及工具类的封装
框架初始化时设置downsampling为true,就开启了downsampling.
构建图片请求时,传入目标宽高,构建Resization:
ImageRequestBuilder.newBuilderWithSource(uri)
.setPostprocessor(processor)
.setResizeOptions(new ResizeOptions(width,height))
最终能达到的效果是,不论是png,jpg,webp,都能按照指定的宽高来向下采样生成该指定宽高bitmap.如果没有指定ResizeOptions,那么生成的bitmap宽高就是图片文件本身的宽高.
注意两者必须配合使用,如果没有设置downsampling为true,则resizing只对jpg生效.
也是初始化时设置:
ImagePipelineConfig.newBuilder(context)
.setBitmapsConfig(Bitmap.Config.RGB_565)
...
编码和显示方法与其他几种常用图片不一样.有几个坑,具体请参考先前的一篇博客:安卓里的gif图片解决方案:Fresco+gif
fresco有相关api支持:
Fresco.getImagePipeline().pause();
Fresco.getImagePipeline().resume();
fresco本身就支持,xml或代码里设置即可.注意gif图片的特殊性,需要特殊处理.
使用开源框架NativeStackBlur,能够将一个bitmap高斯模糊后返回
或者采用为fresco封装好的高斯模糊处理器:BlurPostprocessor
七牛高级图片处理api
安卓里的gif图片解决方案:Fresco+gif
Fresco图片加载框架的介绍,相关开源库以及工具类的封装
智图:png图文件缩小和webp转换
图片裁剪:CropUtils
图片选择:PhotoPicker
七牛取图片的工具类github地址
封装好Fresco工具类