首页 > nginx > nginx利用image_filter动态生成缩略图

nginx利用image_filter动态生成缩略图

2013年12月25日 mood 发表评论阅读评论

"我现在是有些图片需要生成缩略图，这个现在加了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 - 根据设置按比例得减小图像，比如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 {
            
        }

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://wiki.nginx.org/HttpImageFilterModule

分类: nginx 标签: 原图, 缩略图

这几篇文章你可能也喜欢：

评论 (12) Trackbacks (1) 发表评论 Trackback

refrain

2022年4月2日17:46 | #1

回复 | 引用

nginx 裁剪 webp 不可以，报错 nginx was built without GD WebP support while sending to client
突丿隐

2017年3月21日11:12 | #2

回复 | 引用

只能展示一张图片吗？能不能全部展示出来
jicki

2014年11月18日16:56 | #3

回复 | 引用

请问报415错误是什么原因？
鄢思玉

2014年7月31日19:38 | #4

回复 | 引用

好东西，支持，赞，之前公司网站使用过，没想到这几行代码就实行了。
nositin

2014年6月4日09:25 | #5

回复 | 引用

请问图片不支持jpg吗？
- chenhe
  
  2014年6月7日22:29 | #6
  
  回复 | 引用
  
  支持
一天一胎教故事

2014年5月16日16:37 | #7

回复 | 引用

为何我这边老是出现415错误，跟LZ一样的配置
疯骚的程序员

2014年2月20日13:52 | #8

回复 | 引用

那如果想固定宽度的缩放，应该怎么做？
- 疯骚的程序员
  
  2014年2月20日14:19 | #9
  
  回复 | 引用
  
  知道了，用-代替。抱歉，刚没看仔细
  - chenhe
    
    2014年2月25日20:37 | #10
    
    回复 | 引用
    
    嘿嘿，解决就好
    - 疯骚的程序员
      
      2014年3月3日12:16 | #11
      
      回复 | 引用
      
      有办法让只缩小不放大么
      - 湖北青年莫言挨踢民工都是码农
        
        2014年11月19日10:13 | #12
        
        回复 | 引用
        
        不是可以if么自己判断

2016年4月8日17:29 | #1

Nginx动态调整图片大小 – 这个是一个角落

nginx日志记录post的参数 smarty变量赋值给js