在nginx中利用image_filter动态生成缩略图

先来看一下什么是nginx的image filter模块。

HttpImageFilterModule用来裁剪过大的图片到指定大小，是nginx自带模块，默认不会开启
开启HttpImageFilterModule需要在编译要带上参数 --with-http_image_filter_module

该模块主要有两个指令：

语法:

image_filter (test | size | resize width height | crop width height)

默认是: 无
可出现的上下文: location

该指令指定图像的转化形式：

test - 测试回复是否是JPEG、GIF、或PNG图片（不支持BMP等其他格式），出错时返回415。

size - 返回图片的JSON数据，比如:( "Img": ( "width": 100, "height": 100, "type": "gif"))
resize - 根据设置按比例得减小图像，比如100100的图片，而设置是5025，减小后的图片为2525。如果你只想设置一个维度，可以用“-”代替。出错时返回415。
crop - 根据设置按比例得减小图像，然后裁剪成跟设置一样大小的图片。比如100100的图片，而设置是5025，减小后的图片为5050，Nginx会选取中间高度25的像素，形成50*25的图片，所以图片会有缺失。如果你只想设置一个维度，可以用“-”代替。出错时返回415。

语法: image_filter_buffer size

默认值: image_filter_buffer 1M
可出现的位置: http, server, location

该指令设置单图片缓存的最大值，如果过滤的图片大小超过缓存大小，会报错返回415。

现在开始时重点：

有了如上认识再配合locaiont、if、image_filter 就可以让nginx动态生成缩略图了。

假设你的图片位于/img目录下

访问缩略图方式

http://iw3c.com/images/9GUMJR7200AJ0003_90x90.jpg

访问原图方式

http://iw3c.com/images/9GUMJR7200AJ0003_90x0.jpg

http://iw3c.com/images/9GUMJR7200AJ0003_0x50.jpg

http://iw3c.com/images/9GUMJR7200AJ0003_0x0.jpg

http://iw3c.com/images/9GUMJR7200AJ0003.jpg

添加如下配置到server上下文即可

location ~* /images/(.+)_(d+)x(d+).(jpg|gif|png)$ {
set $h $2;
set $w $3;
if ($h = "0") {
rewrite /images/(.+)_(d+)x(d+).(jpg|gif|png)$ /images/$1.$4 last;
}
if ($w = "0") {
rewrite /images/(.+)_(d+)x(d+).(jpg|gif|png)$ /images/$1.$4 last;
}
#根据给定的长宽生成缩略图

image_filter resize h</span> <span class="highlight-nv">w;

#原图最大2M，要裁剪的图片超过2M返回415错误，需要调节参数image_filter_buffer

image_filter_buffer 2M;
#error_page  415              /images/notfound.jpg;

try_files /images/$1</span>.$4</span>  /images/notfound.jpg;	

}
location ~* /images {
}

http://wiki.nginx.org/HttpImageFilterModule

几个其他的规则

匹配全站所有的结尾图片  
---------------------------------------------------------  
        location ~* .(jpg|gif|png)$ {  
            image_filter resize 500 500;  
        }  
---------------------------------------------------------
匹配某个目录所有图片
    location ~* /image/.*.<span class="highlight-o">(</span>jpg<span class="highlight-p">|</span>gif<span class="highlight-p">|</span>png<span class="highlight-o">)</span>$ <span class="highlight-o">{</span>  
        image_filter resize <span class="highlight-m">500</span> 500<span class="highlight-p">;</span>  
    <span class="highlight-o">}</span>  


再比如用url来指定
    location ~* <span class="highlight-o">(</span>.*.<span class="highlight-o">(</span>jpg<span class="highlight-p">|</span>gif<span class="highlight-p">|</span>png<span class="highlight-o">))</span>!<span class="highlight-o">(</span>.*<span class="highlight-o">)</span>x<span class="highlight-o">(</span>.*<span class="highlight-o">)</span>$ <span class="highlight-o">{</span>  
        <span class="highlight-nb">set</span> <span class="highlight-nv">$width</span>      <span class="highlight-nv">$3</span><span class="highlight-p">;</span>  
        <span class="highlight-nb">set</span> <span class="highlight-nv">$height</span>     <span class="highlight-nv">$4</span><span class="highlight-p">;</span>  
        rewrite <span class="highlight-s2">&#34;(.*.(jpg|gif|png))(.*)</span>$<span class="highlight-s2">&#34;</span> <span class="highlight-nv">$1</span><span class="highlight-p">;</span>  
    <span class="highlight-o">}</span>  
      
    location ~* /image/.*.<span class="highlight-o">(</span>jpg<span class="highlight-p">|</span>gif<span class="highlight-p">|</span>png<span class="highlight-o">)</span>$ <span class="highlight-o">{</span>  
        image_filter resize <span class="highlight-nv">$width</span> <span class="highlight-nv">$height</span><span class="highlight-p">;</span>  
    <span class="highlight-o">}</span>  


http://blog.iw3c.com/image/girl.jpg!300x200

自动将原图缩放为300*200的尺寸