［Nginx］使用nginx的image_filter_module来处理图片

我司APP针对不同尺寸的手机需要展示不同尺寸的图片；同时，在App的不同功能模块中，图片展示的大小也不同。然而，旅游线路上传之初，图片只存在一种适用于网站的尺寸，所以这就导致以下问题：

1，图片过大导致 APP加载图片速度慢；

2，消耗用户过多流量；

等等。所以，针对服务器图片处理的解决方案迫在眉睫。

Nginx中的image_filter_module为上述场景提供了可行的方法，本文就此作详细的介绍

一，思路：

1，app请求图片，并提供图片的尺寸信息，nginx拦截请求后，处理并缓存图片；

2，当app下次请求同样的图片时，nginx直接取缓存中的图片返回给app。

二，Nginx图片处理流程图 

三，Nginx image_filter_module 配置部署说明：

nginx_http_image_filter_module在nginx 0.7.54以后才出现的，用于对JPEG, GIF和PNG图片进行转换处理

这个模块默认不被编译，所以要在编译nginx源码的时候，加入相关配置信息

－－－－－－－－－－－编译与安装－－－－－－－

下载nginx最新版本

$ curl  http://nginx.org/download/nginx-1.8.0.tar.gz  |tar -xzf -

添加nginx 配置信息

$   ./configure —-user=web —-group=web  —prefix=/home/web/nginx --with-http_stub_status_module --without-http-cache --with-http_ssl_module  --with-http_image_filter_module

make！

$  make && make install

开启nginx 服务

$ /home/web/nginx/sbin/nginx  

以上四步下载最新的nginx源码，并解压到相应文件夹，然后进入该文件夹，

用./configure添加配置信息（配置中设定这个nginx的用户是web，安装目录是/home/web/nginx），用make编译源码。最后开启nginx服务，如果没出错的话，打开浏览器，输入http://ip 可以看到如下信息

———————————配置－－－－－－－－－－－－－

对nginx功能最基本的定义，都来自于/home/web/nginx/conf/nginx.conf这个文件

我们这里在nginx.conf 包含了 “site_enabled/“这个文件夹，并在site_enabled下创建default文件，用于配置服务器的功能，下面直接贴重要配置信息，并赋予注释

# 匹配满足 下面正则表达式的URI。若匹配，进入该功能段 location ~* "^(/static/upload/images)/([\d-]+)/(.*)\.(jpe?g|png)_(\d+)x(\d+)$"{         # 提取正则表达式中的参数，赋给有意义的变量         set $dir    $2;                      #以日期命名的文件夹         set $width  $5;                   #图片的宽         set $height $6;                   #图片的高         set $dimens "_$5x$6”;      #图片纬度信息         set $reImage_name "$3$dimens.$4”;  #给图片重命名  xxx_w*h.jpg         set $image_name "$3.$4”;                   ＃图片原始名称         # 重定义图片URI，因为图片的存放位置与访问URI不一致，历史问题         alias /data/nginx/resize_images/$dir/$reImage_name;                # 定义image_uri         set $image_uri image_resize/$dir/$image_name?width=$width&height=$height;         # 判断访问的图片是否存在         # 若不存在，proxy_pass到 location /image_resize 进行图片处理         if (!-f $request_filename) {             proxy_pass http://127.0.0.1:82/$image_uri;             break;         }                # 若执行了 proxy_pass，则下面四句都是为了保存处理后的图片，以备日后的访问         proxy_store          /data/nginx/resize_images/$dir/$reImage_name;         proxy_store_access   user:rw  group:rw  all:r;         proxy_temp_path      /data/images;         proxy_set_header     Host $host;                 #访问日志路径         access_log    logs/store.access.log;     } # 匹配满足 /image_resize的URI，都是来自上面的location     location /image_resize {             #access_log  logs/image_resize.log;                          #重定义 访问URI             alias /data/alidata4/files_opt/static/upload/images/;                          # 根据参数，resize 找到的图片             image_filter resize $arg_width $arg_height;             image_filter_jpeg_quality 75;                         # 禁止外网的访问，只允许本地访问             allow 127.0.0.0/8;             deny all;     }

参考：

1， 从源码编译 nginx 

2，nginx配置入门介绍

3，如何控制nginx

4，nginx如何处理http请求

5，nginx的proxy_module（代理模块）

6，nginx的image_filter_module