技术分享| 浅谈IM 产品中的“缩略图”功能

Posted 2022-05-27 anyRTC

在 IM 产品中，发送图片是产品的一个基本功能，如何生成缩略图以及如何显示缩略图都是该模块的组成部分，本文就如何显示缩略图从产品设计的角度去阐述。

从产品上来确认该功能如何去设计，最稳妥的方式就是模仿其他已经被广泛使用的同类App功能，市面上对应该功能的设计上已经开始雷同，标新立异的创新交互方式，虽然能够吸引一部分用户的眼球，但考虑到用户习惯需要用时间来培养， 最终会被大众所吐槽。

缩略图功能：由于图片消耗内存，通常为了防止内存异常的发生，在聊天面板中会显示一种图片的缩略图，点击可以看大图。由于用户可以选择发送任何尺寸的图片，因此在设计的过程中就需要考虑对一些尺寸比较大或比较小的图片的显示策略，否则会影响产品的用户体验。下面就介绍一下在产品中显示缩略图的策略，希望可以帮助到大家。

缩略图生成

生成缩略图，一般 有 2 种方式,一种是配合 OSS 服务，服务端生成缩略图；另一种是客户端生成缩略图。

两种方式的优缺点对比

• 从稳定性来看，用客户端生成缩略图会好一些，除了稳定性，对应成本也相对降低了很多，带来的副作用是客户端上传的时候会多占据一点客户端带宽，由于缩略图一般情况下会很小，一般在10kb内，可忽略不计。
• 从可扩展性来看，服务端生成缩略图更灵活一点，根据策略可以灵活更改缩略图生成策略，且无需升级客户端。

两种方案各有千秋，开发者可以根据自身情况选择其中一种方式，两种方式都能达到自己想要的效果。

缩略图生成规则

缩略图生成规则，一般是限定缩略图的宽高范围，然后再指定生成缩略图的字节数。特殊情况下会有长图的效果，按照限定宽高的范围，缩略图生成会出现极小的宽或高的情况，这样展示起来可能效果不好，针对该种情况我们从显示端做处理，固定显示的宽高比来展示缩略图；当然还有一种处理方式是用固定尺寸裁剪得到缩略图。这两种方式一种是从显示端做处理，一种是从图片的源头做处理，两种方式都能满足需求，具体使用那种规则需要结合开发难度以及性能而定。

图片显示模式

在实际发送图片的时候，有三种图片显示：横图（长 > 宽），竖图（长 < 宽），正方图（长 = 宽），该三种图片显示涵盖了所有的图片样式。图片展示样式的长和宽一般以 IM 聊天窗口的宽做限制：具体格式如下图所示：

• 横图：横图限定最大的宽度：一般是屏幕宽的1/3：最低高度为该宽度的1/3，小于该高度的用该最小高度，其他高度根据比例进行计算。
• 竖图：竖图限定最大的高度：一般是屏幕宽的1/3：最低宽度为该高度的1/3，小于该宽度的用该最小宽度，其他宽度根据比例进行计算。
• 方图：正方形的宽高：一般是屏幕宽的1/3。

根据上述3中方式进行显示：整个IM产品的图片显示模块宣布告终。

结语

IM 缩略图模块只是IM 中的冰山一角，我们也会持续优化和改进。