背景
大多数的系统都会涉及缩略图的处理,比如新闻系统和电商系统,特别是电商系统,每个商品大图都会对应一系列尺寸的缩略图用于不同业务场景的使用。部分系统也会生成不同尺寸的缩略图以供电脑、手机端,ipad端使用。
<>强解决方案探索:
<李>直接加载原图,使用css样式表来控制图片的宽高。显然不太合适,大家也尽量不要这样做。 <李> web程序在上传成功后,同时生成相应缩略图。这种做法效率较低,如果遇到批量导入的业务时严重影响性能。有些图片的缩略图很少使用的到,如果能按需生成岂不更好?李 <李>使用第三方提供的云存储及数据处理服务,解决图片的处理,存储,多节点访问速度的问题,这种方式优点是方案成熟,相应的有一定费用和开发工作,另外有一些小概率的风险,比如云服务挂掉影响本站访问。
<人力资源/>本文使用的是Nginx + Lua + GraphicsMagick实现缩略图功能,图片的上传及删除还是交由web服务处理,缩略图由单独的模块去完成。最终效果类似淘宝图片,实现自定义图片尺寸功能,可根据图片加后缀 100 x100.jpg(固定高宽), -100. jpg(定高),_100 jpg(定宽)形式实现自定义输出图片大小。
<强> github源码地址:https://github.com/botaozhao/nginx-lua-GraphicsMagick
更新说明
<强> 2018-2-9:加入缩略图尺寸限制,需在demo.conf中配置开关及允许的尺寸,代码片段为:
<代码> init_by_lua ' ——开关需要限制缩略图尺寸:真的,不需要限制缩略图尺寸:假的 image_sizes_check=true ——允许的尺寸 image_sizes={" 800 x800”,“400 x400”、“100 x100”、“-800”、“-400”、“-100”、“800”、“400”、“100”} ”;说明
<>强文件夹规划
<代码> img.xxx.com(如/usr/地方/filebase) ├─上传 │└─img │├─001. jpg │└─002. jpg<>强自定义尺寸后的路径
<代码>拇指(/tmp/经验,可在配置文件里面更改) ├─上传 │└─img │├─001. jpg_100x100.jpg #固定高和宽 │├─jpg_ 001. - 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李
安装
<强>系统环境
centOS7 X64虚拟机内最小化安装
以下操作均在此系统中操作,仅供参考
<强> 1,环境准备<代码> yum安装- y wget git yum安装- y gcc gcc-c + + zlib zlib-devel openssl openssl-devel pcre pcre-devel yum安装- y libpng libjpeg libpng-devel libjpeg-devel内容libtiff libtiff-devel freetype freetype-devel yum安装- y GraphicsMagick GraphicsMagick-devel如果提示没有GraphicsMagick的可用安装包,请自行安装GraphicsMagick,具体可参考我的另一篇文章:CentOS7下安装GraphicsMagick1.3.21。
<强> 2,下载相关应用<代码> cd/usr/local/src wget http://nginx.org/download/nginx-1.8.0.tar.gz wget http://luajit.org/download/LuaJIT-2.0.4.tar.gz wget http://zlib.net/fossils/zlib-1.2.8.tar.gz<强> 3,下载nginx组件
<代码> git克隆https://github.com/alibaba/nginx-http-concat.git git克隆https://github.com/simpl/ngx_devel_kit.git git克隆https://github.com/openresty/echo-nginx-module.git git克隆https://github.com/openresty/lua-nginx-module.git<>强解压安装
nginx + lua + GraphicsMagick生成实时缩略图-CentOS7
