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

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

缩略图生成

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

两种方式的优缺点对比

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

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

缩略图生成规则

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

图片显示模式

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

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

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

结语

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。