android 微信朋友圈相册封面裁剪的小秘密

一.起因

因为需求有个类似与微信朋友圈的东东。而且同样可以更换相册封面。刚开始想的很简单,无非就是裁剪下图片,然后传给服务器,最后显示在朋友圈的顶部。可是当我做裁剪的时候却发现,我不能明确的给出图片裁剪区域的比例。因为android严重的碎片化,以及android与iOS分辨率的差异导致你无论怎样裁剪都不可能在所有机型中将裁剪后的图片完整的展示出来。于是我想到了最初的原型——微信朋友圈,打算拿它做个实验,看看微信是如何实现的。

二.实验准备

为了更好的体现出微信相册封面展示图片的区域,所以我打算自己做一张图。原本打算画一个坐标,可当我打开PS的时候发现只会用PS切图的我,根本画不出一个标准的坐标。所以我就画了这个东东。注意前方高能。。。。。。。

android 微信朋友圈相册封面裁剪的小秘密_第1张图片

说实话我都觉得对不起我的朋友圈。为了革命,忍了。

三.开始实验

将做好的图片传到了我的android机上,打开微信进行裁剪。裁剪的区域大概是这样的android 微信朋友圈相册封面裁剪的小秘密_第2张图片

下面是在android机上的效果

android 微信朋友圈相册封面裁剪的小秘密_第3张图片

然后我又用我的苹果机登陆了微信,效果如下

android 微信朋友圈相册封面裁剪的小秘密_第4张图片

四.分析,结论

可以看出我裁剪的区域切掉了色块下参差不齐的地方,在裁剪图片的android机上没有展示出参差不齐的地方,而苹果机展示出参差不齐的区域,从而证明色块上下的空白是我原图的空白部分。(我实在懒得再去搞一张其他颜色背景的图片了)

所以可以看出,微信在裁剪的时候虽然显示裁剪区域是一个封闭的长方形,可实际上微信只裁掉了水平方向多余的地方,而竖直方向上的区域全都保留了下来并上传给了服务器。

五.遗留问题

因为还要实现产品需求所以没有去实验图片高度不够填充布局的情况下微信是怎样实现的。猜测是放大图片让图片竖直方向填满布局,图片居中裁掉两侧多余的部分。

你可能感兴趣的:(日常使用)