縮略圖

系統目前的問題：首頁直接加載原圖，原圖文件通常比縮略圖大數倍甚至數十倍，不僅導致加載時間長，還會造成大量流量浪費。

解決方案：上傳圖片時，同時生成一份較小尺寸的縮略圖。用戶瀏覽圖片列表時加載縮略圖，只有在進入詳情頁或下載才加載原圖。

實現方案

生成縮略圖的方法和“圖片壓縮”一致，可以使用本地圖像處理類庫，也可以利用第三方云服務完成。

第三方云服務的參數：

后端開發

1）數據表 picture 新增縮略圖字段：

ALTER TABLE picture-- 添加新列ADD COLUMN thumbnailUrl varchar(512) NULL COMMENT '縮略圖 url';

2）PictureMapper.xml 新增縮略圖字段：

<result property="thumbnailUrl" column="thumbnailUrl" jdbcType="VARCHAR"/>
<!-- ... -->
<sql id="Base_Column_List">id,url,thumbnailUrl,name,introduction,category,tags,picSize,picWidth,picHeight,picScale,picFormat,userId,createTime,editTime,updateTime,isDelete
</sql>

3）數據模型新增縮略圖字段，包括 Picture 類、PictureVO 類、UploadPictureResult類：

/*** 縮略圖 url*/
private String thumbnailUrl;

4）縮略圖處理

首先明確我們使用的縮放規則，設置最大寬高后，對圖片進行等比縮小。且如果縮略圖的寬高大于原圖，則不會處理。

修改 CosManage 的上傳圖片方法，補充對縮略圖的處理：

  //圖片縮放PicOperations.Rule thumbnailRule = new PicOperations.Rule();thumbnailRule.setBucket(cosClientConfig.getBucket());String thumbnailKey = FileUtil.mainName(key) + "_thumbnail." + FileUtil.getSuffix(key);thumbnailRule.setFileId(thumbnailKey);thumbnailRule.setRule(String.format("imageMogr2/thumbnail/!%sx%sr", 256, 256));rules.add(thumbnailRule);

修改PictureUploadTemplate 的上傳圖片方法，獲取到縮略圖：

   //設置縮略圖uploadPictureResult.setThumbnailUrl(cosClientConfig.getHost() + "/" + thumbnailCiObject.getKey());

5）測試

?