app缩略图生成策略设计

问题

最近在开发app时遇到的问题之一，用户可以上传自定义样式的图片，也就是说宽高比不统一，用户相册原图是什么样的上传就是什么样的，只是在前端做了一次压缩，把大小从几M不等压缩控制在150K以内，但图片分辨率多种多样。这也是一般app上传功能的普遍做法，除了头像一般都不裁切。那么在处理缩略图的时候就不好处理了，因为不是固定尺寸，所以不能按照传统思路简单地设置固定分辨率的好小中大图。

参考

看了微信和今日头条的列表缩略图样式大体有了个概念，今日头条有两种缩略图样式：一种是大图占满整个item宽高比是16：9，一种是item显示三张小缩略图宽高比是3：2。

微信也有两种样式：一种是一张图片充满整个item，还有就是九宫格形式在item中填充网格图片，最多九张。



而闲的蛋疼的我对传一张图片的显示样式有了比较大的好奇心，于是乎，我分别截取了不同分辨率的图片用于展示：
900x900、900x600、900x450、900x300、900x225、900x100
展示如下



可以看出前四张只是高度相对应的缩减，这是正常比例缩放后展示嘛没毛病，第五张what？怎么高度不减反而拉长了呢，可见高度降到一定比例就固定了，开始拉伸宽度，而到900x225的比例时宽高正好都已经压缩到极限了，那么到了第六张900x100显示就和900x225显示的缩略图宽高比一样了~

话说不测不知道，朋友圈缩略图有这么深的门道。当然具体比例算法这次就不细究了，下面是六张不同尺寸的图用九宫格显示的样式。

显示的区域都是图片最中心区域（亲测），其实一张图的细节我不是很关心，因为我做的app主要涉及九宫格样式，那么核心思想是缩略图显示中间区域就可以了。

思路

我们这次只探讨九宫格缩略图的展示
九宫格缩略图核心思想是显示中心区域，那么有两种解决方案：
1. 后台拿到原图后截取出中心区域生成缩略图
2. 后台拿到原图后进行等比压缩，形成完整图片的缩略图（例如1920x1280的图片等比压缩5倍变为384x256），然后app端拿等比压缩图设置展示类型为centerCrop（截取中心区域）
相比之下我更倾向于第二种，因为后台现有工具类等比压缩是可以做的，中心截取相对比较麻烦，而app端展示类型则是现成的。
还有一个限制就是后台等比压缩后大小最好控制在20k以内，现在上传的图片大小在100k左右，所以应该比较好实现。