设为首页 - 加入收藏 - 网站地图 欢迎加QQ群 :14364084
当前位置:谭博的博客 > linux > 正文

nginx利用image_filter动态生成缩略图

时间:2014-11-19 11:17 来源:未知 标签: 作者:谭博 阅读:

先来看一下什么是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 - 根据设置按比例得减小图像,比如100*100的图片,而设置是50*25,减小后的图片为25*25。如果你只想设置一个维度,可以用“-”代替。出错时返回415。
crop - 根据设置按比例得减小图像,然后裁剪成跟设置一样大小的图片。比如100*100的图片,而设置是50*25,减小后的图片为50*50,Nginx会选取中间高度25的像素,形成50*25的图片,所以图片会有缺失。如果你只想设置一个维度,可以用“-”代替。出错时返回415。

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

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

现在开始时重点:

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

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

访问缩略图方式

http://www.xxx.cn/img/9GUMJR7200AJ0003_90x90.jpg

访问原图方式

http://www.xxx.cn/img/9GUMJR7200AJ0003_90x0.jpg

http://www.xxx.cn/img/9GUMJR7200AJ0003_0x50.jpg

http://www.xxx.cn/img/9GUMJR7200AJ0003_0x0.jpg

http://www.xxx.cn/img/9GUMJR7200AJ0003.jpg

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

        location ~* /img/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ {            
            set $h $2;
            set $w $3;
            if ($h = "0") {
                rewrite /img/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /img/$1.$4 last;
            }
            if ($w = "0") {
                rewrite /img/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /img/$1.$4 last;
            }

            #根据给定的长宽生成缩略图
            image_filter resize $h $w;
            #原图最大2M,要裁剪的图片超过2M返回415错误,需要调节参数image_filter_buffer 
            image_filter_buffer 2M;                          
            
            #error_page  415              /img/notfound.jpg;
            try_files /img/$1.$4  /img/notfound.jpg;	
        }

        location ~* /img {
            
        }

http://nginx.org/en/docs/http/ngx_http_image_filter_module.html

 

关注微信公众号

微信扫一扫,打赏我

热评文章
    内容不错,支持一下
    评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)