>  在 IM 產品中，傳送圖片是產品的一個基本功能，如何生成縮圖以及如何顯示縮圖都是該模組的組成部分，本文就如何顯示縮圖從產品設計的角度去闡述。
>  
> 從產品上來確認該功能如何去設計，最穩妥的方式就是模仿其他已經被廣泛使用的同類App功能，市面上對應該功能的設計上已經開始雷同，標新立異的創新互動方式，雖然能夠吸引一部分使用者的眼球，但考慮到使用者習慣需要用時間來培養， 最終會被大眾所吐槽。
>
> 縮圖功能：由於圖片消耗記憶體，通常為了防止記憶體異常的發生，在聊天皮膚中會顯示一種圖片的縮圖，點選可以看大圖。由於使用者可以選擇傳送任何尺寸的圖片，因此在設計的過程中就需要考慮對一些尺寸比較大或比較小的圖片的顯示策略，否則會影響產品的使用者體驗。下面就介紹一下在產品中顯示縮圖的策略，希望可以幫助到大家。

## 縮圖生成

生成縮圖，一般 有 2 種方式,一種是配合 OSS 服務，服務端生成縮圖；另一種是客戶端生成縮圖。

## 兩種方式的優缺點對比

- 從穩定性來看，用客戶端生成縮圖會好一些，除了穩定性，對應成本也相對降低了很多，帶來的副作用是客戶端上傳的時候會多佔據一點客戶端頻寬，由於縮圖一般情況下會很小，一般在10kb內，可忽略不計。
- 從可擴充套件性來看，服務端生成縮圖更靈活一點，根據策略可以靈活更改縮圖生成策略，且無需升級客戶端。

兩種方案各有千秋，開發者可以根據自身情況選擇其中一種方式，兩種方式都能達到自己想要的效果。

## 縮圖生成規則

縮圖生成規則，一般是限定縮圖的寬高範圍，然後再指定生成縮圖的位元組數。特殊情況下會有長圖的效果，按照限定寬高的範圍，縮圖生成會出現極小的寬或高的情況，這樣展示起來可能效果不好，針對該種情況我們從顯示端做處理，固定顯示的寬高比來展示縮圖；當然還有一種處理方式是用固定尺寸裁剪得到縮圖。這兩種方式一種是從顯示端做處理，一種是從圖片的源頭做處理，兩種方式都能滿足需求，具體使用那種規則需要結合開發難度以及效能而定。

## 圖片顯示模式

在實際傳送圖片的時候，有三種圖片顯示：橫圖（長 > 寬），豎圖（長 < 寬），正方圖（長 = 寬），該三種圖片顯示涵蓋了所有的圖片樣式。圖片展示樣式的長和寬一般以 IM 聊天視窗的寬做限制：具體格式如下圖所示：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/202c1d0d4d3145bfa812d7dd263e834d.png#pic_center)

- 橫圖：橫圖限定最大的寬度：一般是螢幕寬的1/3：最低高度為該寬度的1/3，小於該高度的用該最小高度，其他高度根據比例進行計算。
- 豎圖：豎圖限定最大的高度：一般是螢幕寬的1/3：最低寬度為該高度的1/3，小於該寬度的用該最小寬度，其他寬度根據比例進行計算。
- 方圖：正方形的寬高：一般是螢幕寬的1/3。

根據上述3中方式進行顯示：整個IM產品的圖片顯示模組宣佈告終。

## 結語

IM 縮圖模組只是IM 中的冰山一角，我們也會持續最佳化和改進。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/8a11ea1191fb4a75ab90a64190d7a71d.jpeg#pic_center)

技術分享| 淺談IM 產品中的“縮圖”功能

相關文章