nginx图片处理

 

前言

不管一个系统或网站的大与小，都存在相应的图片处理，生成缩略图、为图片加水印等等，如果涉及到APP端，这个图片的处理需求变得更加重要了，因为在目前看来，客户端的屏幕大小不一，会导致以下问题： 
1、图片过大导致APP加载图片速度慢； 
2、消耗用户过多流量。

---

思路

1、APP请求图片，并提供需要图片的尺寸信息，nginx经过拦截后，处理并缓存图片。 
2、当app下次请求同样的图片时，nginx直接取缓存中的图片返回给APP（这个暂不深究）。

nginx图片处理流程图

具体实现步骤：

1、nginx_http_image_filter_module在nginx 0.7.54以后才出现的，用于对JPEG, GIF和PNG图片进行转换处理这个模块默认不被编译，所以要在编译nginx源码的时候，加入相关配置信息（略） 
2、ngx_http_image_filter_module指令（nginx官网）

location /img/ {
    proxy_pass   http://backend;
    image_filter resize 150 100;
    image_filter rotate 90;
    error_page   415 = /empty;
}

location = /empty {
    empty_gif;
}

3、http_image_filter_module指令的配置本地nginx

location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
     set $w     $3;
     set $h     $4;
     rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
     image_filter resize $w $h;
}

4、运行结果： 
（1）

 
（2）

疑问：这两张图片看上去，怎么看也不是一个正方形？ 
解答：http_image_filter_module模块的image_filter 指令决定了，语法: image_filter (test | size | resize width height | crop width height)，这里用到了 resize width height；resize：就是根据设置按比例得到图片； 
疑问：怎么才能得到设置的真实的大小，比如100x100，就得到一张100x100的图片？ 
解答：进行剪裁，用到的是 crop width height 
5、配置

location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
     set $w     $3;
     set $h     $4;
     rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
     image_filter resize $w $h;
     image_filter crop $w $h;
}

6、运行结果： 
（1）

（2）

7、到此就已经实现了生成缩略图的配置了，如果还需要其他的操作，比如，将图片旋转，就是用rotate就可以了，其他就不做过多的描述。 
8、配置

location ~* (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ {
     set $w     $3;
     set $h     $4;
     set $rotate     $5;
     rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)!(.*)$ $1 break;
     image_filter resize $w $h;
     image_filter crop $w $h;
     image_filter rotate $rotate;
}