缩略图

系统目前的问题：首页直接加载原图，原图文件通常比缩略图大数倍甚至数十倍，不仅导致加载时间长，还会造成大量流量浪费。

解决方案：上传图片时，同时生成一份较小尺寸的缩略图。用户浏览图片列表时加载缩略图，只有在进入详情页或下载才加载原图。

实现方案

生成缩略图的方法和“图片压缩”一致，可以使用本地图像处理类库，也可以利用第三方云服务完成。

第三方云服务的参数：

后端开发

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）测试