使用nginx+Lua+GraphicsMagick实现图片自动裁剪

使用nginx+Lua+GraphicsMagick实现图片自动裁剪

在制作一个网站的过程中，尤其是以内容为导向的，我们经常会遇到一张图片要在各个地方引用，每个引用的地方要求的图片大小都不一样。对于小网站来说，这个需求通常是手工裁剪的，然后在代码中单独引用。但是当网站上的图片越来越多的时候，这种方式的效率就会凸显出来，所以一般中大型网站都会自动裁剪这类图片。本文基于centos6 *** 作系统，利用nginx、lua和GraphicsMagick工具，简单实现了图片的自动裁剪功能。Nginx负责显示图片和调度lua脚本，GraphicsMagick负责剪切原始图片。

实现功能点如下:

1、输入原图地址，例如：http://192.168.1.19/img_6065.jpg后返回原图1.输入原图像的地址，例如:http://192.168.1.19/img_6065.jpg，返回原图像。

2、输入图片地址，例如：http://192.168.1.19/img_6065.jpg_200x400.jpg 后，如果目录底下存在图片，则返回，如果不存在则根据需求对原图进行裁剪，其中200代表图片的宽，400代表图片的长。2.输入图片地址后，例如:http://192.168.1.19/img_6065.jpg_200x400.jpg，如果目录底部有图片，则返回。如果没有，将根据要求对原始图像进行裁剪，其中200代表图像的宽度，400代表图像的长度。

3.图片的根目录是/static/p_w_picpaths，裁剪后的图片和原图放在同一个目录下。比如原图地址的物理路径是:/static/p_w_picpaths/uploads/2016/07/01.jpg。

200x200裁剪的图片物理路径为:/static/p_w_picpaths/uploads/2016/07/01_200x200.jpg。

一、基本软件包安装

# groupadd www # useradd -g www www -s /bin/false # yum -y install epel-release git # yum install -y gcc gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel # yum install -y libpng libjpeg libpng-devel libjpeg-devel ghostscript libtiff libtiff-devel freetype freetype-devel readline-devel ncurses-devel

第二，下载相关软件

nginx-http-concat和echo-nginx-module模块不是必需的。

# 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/zlib-1.2.8.tar.gz # wget http://www.lua.org/ftp/lua-5.3.1.tar.gz   # wget ftp://ftp.graphicsmagick.org/pub/GraphicsMagick/1.3/GraphicsMagick-1.3.18.tar.gz   # git clone https://github.com/alibaba/nginx-http-concat.git # git clone https://github.com/simpl/ngx_devel_kit.git # git clone https://github.com/openresty/echo-nginx-module.git # git clone https://github.com/openresty/lua-nginx-module.git

第三，编译安装nginx和GraphicsMagickK。

# tar -zxf nginx-1.8.0.tar.gz # tar -zxf LuaJIT-2.0.4.tar.gz # tar -zxf zlib-1.2.8.tar.gz # cd LuaJIT-2.0.4 # make  # make install  # export LUAJIT_LIB=/usr/local/lib # export LUAJIT_INC=/usr/local/include/luajit-2.0 # ln -s /usr/local/lib/libluajit-5.1.so.2 /lib64/libluajit-5.1.so.2   # cd .. # tar -zxvpf lua-5.3.1.tar.gz # cd lua-5.3.1 # make linux && make install   # cd .. # tar -zxvpf GraphicsMagick-1.3.18.tar.gz # cd GraphicsMagick-1.3.18 # ./configure --prefix=/usr/local/GraphicsMagick --enable-shared # make  && make install   # cd .. # cd nginx-1.8.0 # ./configure --prefix=/usr/local/nginx \ --user=www \ --group=www \ --with-http_ssl_module \ --with-http_realip_module \ --with-http_sub_module \ --with-http_flv_module \ --with-http_dav_module \ --with-http_gzip_static_module \ --with-http_stub_status_module \ --with-http_addition_module \ --with-http_spdy_module \ --with-pcre \ --with-zlib=../zlib-1.2.8 \ --add-module=../nginx-http-concat \ --add-module=../lua-nginx-module \ --add-module=../ngx_devel_kit \ --add-module=../echo-nginx-module \  --with-ld-opt=-Wl,-rpath,$LUAJIT_LIB   # make && make install

四。修改nginx配置文件

   server {         listen       80;         server_name  192.168.1.19;         root /static/p_w_picpath;           location /lua1 {         default_type 'text/plain';         content_by_lua 'ngx.say("hello, lua")';         }               location ~* ^(.+\.(jpg|jpeg|gif|png))_(\d+)x(\d+)\.(jpg|jpeg|gif|png)$ {                 root /static/p_w_picpath;                 if (!-f $request_filename) {    # 如果文件不存在时才需要裁剪                         add_header X-Powered-By 'Lua GraphicsMagick';    # 此 HTTP Header 无实际意义，用于测试                         add_header file-path $request_filename;    # 此 HTTP Header 无实际意义，用于测试                         #lua_code_cache off; # 在编写外部 Lua 脚本时，设置为 off Nginx 不会缓存 Lua，方便调试                         set $request_filepath /static/p_w_picpath/$1;    # 设置原始图片路径，如：/document_root/1.gif                         set $width $3;    # 设置裁剪/缩放的宽度                         set $height $4;    # 设置裁剪/缩放的高度                         set $ext $5;    # 图片文件格式后缀                         content_by_lua_file lua/ImageResizer.lua;    # 加载外部 Lua 文件                 }             } }

5.准备lua脚本

# cat /usr/local/nginx/lua/ImageResizer.lua  local command = "/usr/local/GraphicsMagick/bin/gm convert   -auto-orient -strip " .. ngx.var.request_filepath .. " -resize " .. ngx.var.width .. "x" .. ngx.var.height .. " +profile \"*\" " .. ngx.var.request_filepath .. "_" .. ngx.var.width .. "x" .. ngx.var.height .. "." .. ngx.var.ext; os.execute(command);     ngx.exec(ngx.var.request_uri);

不及物动词测试

# cd /static/p_w_picpath/ # ls # cd uploads/2016/07/21/ # ls

如果要将图片nginx裁剪成固定的高宽模式，例如:http://192.168.1.19/uploads/2016/07/21/1.jpg_-200.jpg或http://192.168.1.19/uploads/2016。

http {     include       mime.types;     default_type  application/octet-stream;     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '                       '$status $body_bytes_sent "$http_referer" '                       '"$http_user_agent" "$http_x_forwarded_for"';     access_log  logs/access.log  main;     sendfile        on;     tcp_nopush     on;     keepalive_timeout  65;     gzip  on;     server {         listen       80;         server_name  192.168.1.19;         root /static/p_w_picpath;         location /lua1 {         default_type 'text/plain';         content_by_lua 'ngx.say("hello, lua")';         }    set $upload_path /static/p_w_picpath;     set $img_original_root  $upload_path;# original root;     set $img_thumbnail_root $upload_path/cache/thumb;     set $img_file $img_thumbnail_root$uri;     # like：/xx/xx/xx.jpg_100-.jpg or /xx/xx/xx.jpg_-100.jpg     location ~* ^(.+\.(jpg|jpeg|gif|png))_((\d+\-)|(\-\d+))\.(jpg|jpeg|gif|png)$ {             root $img_thumbnail_root;    # root path for croped img             set $img_size $3;             if (!-f $img_file) {    # if file not exists                     add_header X-Powered-By 'Nginx+Lua+GraphicsMagick By Yanue';  #  header for test                     add_header file-path $request_filename;    #  header for test                     set $request_filepath $img_original_root$1;    # origin_img full path：/document_root/1.gif                     set $img_size $3;    # img width or height size depends on uri                     set $img_ext $2;    # file ext                     content_by_lua_file lua/autoSize.lua;    # load lua             }     }     # like: /xx/xx/xx.jpg_100x100.jpg     location ~* ^(.+\.(jpg|jpeg|gif|png))_(\d+)+x(\d+)+\.(jpg|jpeg|gif|png)$ {             root $img_thumbnail_root;    # root path for croped img             if (!-f $img_file) {    # if file not exists                     add_header X-Powered-By 'Nginx+Lua+GraphicsMagick By Yanue';  #  header for test                     add_header file-path $request_filename;    #  header for test                     set $request_filepath $img_original_root$1;    # origin_img file path                     set $img_width $3;    # img width                     set $img_height $4;    # height                     set $img_ext $5;    # file ext                     content_by_lua_file lua/cropSize.lua;    # load lua             }     } } }

其次，准备两个lua脚本，包含在附件中。

测试结果如下:

后记:

这样简单的实现了需求，但是对url中图片的高度和宽度没有限制。这一点要注意，如何清理长时间不用的缩略图也要考虑。

参考文档，感谢作者分享！

http://my.oschina.net/eduosi/blog/169606

http://blog.ddtet.org/2014/03/graphicsmagick.html

https://github.com/yanue/nginx-lua-GraphicsMagick

http://www.111cn.net/sys/CentOS/55070.htm