一、前提
最近在开发一个项目,涉及到缩略图的功能,常见的生成缩略图的方案有以下几个:
人工创建
1 | 由美工 PS 出缩略图,然后上传到服务器上进行访问。 |
工具包创建
1 | 上传原图到后台时,后台借用工具(如:Thumbnailator)创建缩略图 |
第三方平台
1 | 如七牛云平台,在原图链接地址后加缩略图尺寸(如:http://images.xxx/abc.jpg_400x400.jpg)灵活生成缩略图 |
很明显,第三个方案是比较好的,但是由于收费,笔者便放弃该方案。
那有没有既免费又能动态生成缩略图的方案呢?答案是肯定的,且看下文。
二、实现思路
实现功能需要用到 3 个工具:
1 | Nginx:负责 web 服务器 |
大致的运行原理如下:
1 | 首先在 Nginx 中整合 Lua,由 Lua 处理响应请求。 |
如需了解更多资料,请查看文章末尾提供的链接。
三、准备工作
测试环境:IP 为 192.168.2.16 的 CentOS 7.x 系统
先安装依赖包
1 | yum install -y gcc g++ gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel |
3.1 安装 Lua 即时编译器
1 | git clone https://github.com/openresty/luajit2.git |
vim /etc/profile 添加如下配置:
1 | export LUAJIT_LIB=/usr/local/lib |
保存后重新编译 source /etc/profile。
创建软连接:
1 | ln -s /usr/local/lib/libluajit-5.1.so.2 /lib64/libluajit-5.1.so.2 |
3.2 安装 GraphicsMagick
1 | wget https://sourceforge.net/projects/graphicsmagick/files/graphicsmagick/1.3.33/GraphicsMagick-1.3.33.tar.gz |
注意:在执行 “gm covert” 时如果报错:“No decode delegate for this image format” 需要安装对应的依赖包
1 | # jpeg 相关 |
同样是解压后执行 make && make install
3.3 安装 Nginx
笔者事先通过 yum 方式安装 nginx,但是扩展模块依赖 configure 命令,因此需要下载相同版本的源码包重新编译。
查看 Nginx 已安装的模块:
1 | nginx -V |
结果:
1 | --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie' |
下载 nginx 源码包和 lua 扩展包:
注意:此处的安装有版本兼容问题,因此最好复制粘贴地址进行下载和安装!!!
1 | wget http://nginx.org/download/nginx-1.16.1.tar.gz |
注意:不要 make install
启动 nginx
1 | /usr/local/nginx/sbin/nginx |
访问到下图说明安装成功:
四、实战演练
4.1 访问原图
在 nginx 的目录中创建一个名为 images 的目录,在该目录中放入 1.png 的图片。
配置 nginx.conf:
1 | server { |
重启 Nginx 访问图片:
成功访问原图。
4.2 访问缩略图
修改 nginx.conf 文件:
1 | server { |
在 /usr/local/nginx/lua/ 目录下创建 ImageResizer.lua 文件,内容如下:
1 | local command = "/usr/local/GraphicsMagick/bin/gm convert -auto-orient -strip " .. ngx.var.request_filepath .. |
重启 Nginx 访问图片,在原图 url 后添加缩略图尺寸(_600x600.png):
我们再查看存放图片的目录:
已经动态生成图片了。