nginx+lua+GraphicsMagick生成实时缩略图-CentOS7

Posted 2020-10-23

背景

大多数的系统都会涉及缩略图的处理，比如新闻系统和电商系统，特别是电商系统，每个商品大图都会对应一系列尺寸的缩略图用于不同业务场景的使用。部分系统也会生成不同尺寸的缩略图以供PC、手机端、ipad端使用。

解决方案探索：

1. 直接加载原图，使用css样式表来控制图片的宽高。显然不太合适，大家也尽量不要这样做。
2. web程序在上传成功后，同时生成相应缩略图。这种做法效率较低，如果遇到批量导入的业务时严重影响性能。并且同步生成缩略图会占用一定量的存储空间，如果能按需生成岂不更好？
3. 使用七牛、阿里云提供的云存储及数据处理服务，解决图片的处理、存储、多节点访问速度的问题，这种方式优点是方案成熟，相应的有一定费用和开发工作，另外有一些小概率的风险，比如云服务挂掉影响本站访问。
4. 使用第三方的图片处理程序，比如zimg，点击查看使用手册，@招牌疯子开发。zimg的性能和扩展性不错，文档也很完善，会继续保持关注。

---

本文使用的是nginx+Lua+GraphicsMagick实现缩略图功能，图片的上传及删除还是交由web服务处理，缩略图由单独的模块去完成。最终效果类似淘宝图片，实现自定义图片尺寸功能，可根据图片加后缀100x100.jpg(固定高宽),-100.jpg(定高),_100-.jpg(定宽)形式实现自定义输出图片大小。

说明

文件夹规划

img.xxx.com(如/usr/local/filebase)
├─upload
│  └─img
│    ├─001.jpg
│    └─002.jpg

自定义尺寸后的路径

thumb(/tmp/thumb,可在conf文件里面更改)
├─upload
│  └─img
│    ├─001.jpg_100x100.jpg #固定高和宽
│    ├─001.jpg_-100.jpg #定高
│    ├─001.jpg_200-.jpg #定宽
│    └─002.jpg_300x300.jpg #固定高和宽

• 其中img.xxx.com为图片站点根目录，img目录是原图目录
• 缩略图目录根据保持原有结构，并单独设置目录，可定时清理。

链接地址对应关系
原图访问地址：http://img.xxx.com/upload/img/001.jpg
缩略图访问地址：http://img.xxx.com/upload/img/001.jpg_100x100.jpg 即为宽100,高100
自动宽地址: http://img.xxx.com/upload/img/001.jpg_-100.jpg 用"-"表示自动,即为高100,宽自动
自动高地址: http://img.xxx.com/upload/img/001.jpg_200-.jpg 用"-"表示自动,即为宽200,高自动

访问流程

• 首先判断缩略图是否存在，如存在则直接显示缩略图；
• 缩略图不存在,则判断原图是否存在，如原图存在则拼接graphicsmagick(gm)命令,生成并显示缩略图,否则返回404