Lua + Nginx 实现动态生成图片缩略图功能

NDIS herman 316浏览
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:codedq,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:codedq,之前的微信号好友位已满,备注:返现
饿了么大量招人,我内推!Java 方向!薪资不设上限,工作年龄不限!工作地点限魔都,可电话面试!简历,发我微信:codedq
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

缩略图的实现方法有很多种。比如,有的直接放置一大一小两种图;有的直接靠前端去缩放图片;也有的靠第三方应用,比如七牛云实现。但是这些实现都不太符合我们。由于目前我们的应用比较特殊,想在自建的图片服务器上控制是否需要显示缩略图。因此,我们借助了 Nginx + GraphicsMagick + Lua 的形式来生成缩略图!

这里边,Nginx 负责 web 服务器的职能,GraphicsMagick 负责生成缩略图,Lua 负责控制缩略图尺寸以及调用 GraphicsMagick。

所以,我们需要在 Nginx 中整合 Lua,由 Lua 处理响应请求。当 Nginx 接收到图片请求时解析 url 获取图片尺寸传到 Lua 脚本,Lua 则调用 GraphicsMagick 生成缩略图,然后 Lua 将生成的缩略图返回到客户端。

下面我说一说我的整个实现过程。

首先,我们需要安装一些依赖包!

yum install -y gcc g++ gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel

接着安装 Lua 即时编译器。

git clone https://github.com/openresty/luajit2.git

cd luajit2
make && make install 

然后完成后,修改 vim /etc/profile,添加如下配置:

export LUAJIT_LIB=/usr/local/lib
export LUAJIT_INC=/usr/local/include/luajit-2.1

这一步是配置环境变量,让 lua 可以在任意位置执行命令。

保存后重新编译 source /etc/profile。我们再创建软连接:

ln -s /usr/local/lib/libluajit-5.1.so.2 /lib64/libluajit-5.1.so.2

最后,我们再安装 GraphicsMagick。

wget https://sourceforge.net/projects/graphicsmagick/files/graphicsmagick/1.3.33/GraphicsMagick-1.3.33.tar.gz

tar -zxvf GraphicsMagick-1.3.33.tar.gz
cd GraphicsMagick-1.3.33
./configure --prefix=/usr/local/GraphicsMagick --enable-shared
make && make install

# 检测安装是否成功
/usr/local/GraphicsMagick/bin/gm version

提醒:在执行 “gm covert” 时如果报错:“No decode delegate for this image format” 需要安装对应的依赖包。

# jpeg 相关
wget http://www.ijg.org/files/jpegsrc.v9c.tar.gz

# png 相关
wget https://download.sourceforge.net/libpng/libpng-1.6.37.tar.gz

同样是解压后执行 make && make install。

再接下来,就是我们的主角 Nginx 的安装了。

nginx -V

注意,有些机器上可能已经安装了 Nginx,如果已经安装过了,则需要看看版本。

--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' 

像上面这种,我们就需要重新安装。

wget http://nginx.org/download/nginx-1.16.1.tar.gz
wget https://github.com/simpl/ngx_devel_kit/archive/v0.3.0.tar.gz
wget https://github.com/openresty/lua-nginx-module/archive/v0.10.14.tar.gz

tar -zxvf nginx-1.16.1.tar.gz
tar -xzf v0.3.0.tar.gz
tar -xzf v0.10.14.tar.gz

cd nginx-1.16.1

./configure 已安装的模块 --add-module=/root/ngx_devel_kit-0.3.0 --add-module=/root/lua-nginx-module-0.10.14

make 

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

cp ./objs/nginx /usr/local/nginx/sbin/

注意:不要 make install,然后我们启动 nginx。

如果能过成功启动,并访问后出现 Welcome to nginx!则表明安装成功!

现在假设,我们在 nginx 的目录中创建一个名为 images 的目录,在该目录中放入 1.png 的图片。具体的 nginx.conf 配置信息如下所示:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    root  /usr/local/nginx/images/;

    location / {
       root html;
       index index.html;
    }

    location ~* \.(gif|jpg|jpeg|png)$ {
        root  /usr/local/nginx/images/;
    }
}

重启 Nginx 后,要保证原图可以访问,则表明配置成功。

下面我们接着整合 lua 脚本。

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    root  /usr/local/nginx/images/;

    location / {
       root html;
       index index.html;
    }

    location ~* (.*\.(jpg|jpeg|gif|png))_(\d+)x(\d+)\.(jpg|jpeg|gif|png)$ {
        if (!-f $request_filename) {
                set $request_filepath /usr/local/nginx/images/$1;
                set $width $3;
                set $height $4;
                set $ext $5;
                content_by_lua_file /usr/local/nginx/lua/ImageResizer.lua;
        }
        # 注意:改配置必须放在 if 之后
        root  /usr/local/nginx/images/;
    }
}

修改 nginx.conf 后,同样需要重启!上面用到了一个 lua 脚本,在 /usr/local/nginx/lua/ 目录下创建的 ImageResizer.lua 文件,内容如下:

local command = "/usr/local/GraphicsMagick/bin/gm convert   -auto-orient -strip " .. ngx.var.request_filepath ..

现在在原图 url 后添加缩略图尺寸(_600x600.png)就可以访问到对应尺寸的缩略图了。对应的在 nginx/images 目录下会多出一个图片来!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号1:xmtxtt(5000人已满),微信号2:xttblog(5000人已满),微信号3:codedq(超3800)。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » Lua + Nginx 实现动态生成图片缩略图功能