快捷導(dǎo)航

使用Nginx中自帶的模塊配置縮略圖功能的教程

更新時(shí)間：2016年06月14日 09:40:57 作者：phphot

Nginx的http_image_filter_module模塊可以用來(lái)處理縮略圖,這里我們就來(lái)看看使用Nginx中自帶的模塊配置縮略圖功能的教程,需要的朋友可以參考下

http_image_filter_module是nginx提供的集成圖片處理模塊，支持nginx-0.7.54以后的版本，在網(wǎng)站訪問(wèn)量不是很高磁盤(pán)有限不想生成多余的圖片文件的前提下可，就可以用它實(shí)時(shí)縮放圖片，旋轉(zhuǎn)圖片，驗(yàn)證圖片有效性以及獲取圖片寬高以及圖片類型信息，由于是即時(shí)計(jì)算的結(jié)果，所以網(wǎng)站訪問(wèn)量大的話，不建議使用。
安裝
安裝還是很簡(jiǎn)單的，默認(rèn)HttpImageFilterModule模塊是不會(huì)編譯進(jìn)nginx的，所以要在configure時(shí)候指定

./configure arguments: --prefix=/usr/local/nginx --with-http_image_filter_module

PS: HttpImageFilterModule模塊需要依賴gd-devel的支持，可以使用yum或apt-get方便地安裝，如果未安裝回報(bào)“/configure: error: the HTTP image filter module requires the GD library.”錯(cuò)誤

yum install gd-devel

apt-get install libgd2-xpm libgd2-xpm-dev

make&&make install后就可以進(jìn)行配置了，做最簡(jiǎn)單的配置，先讓模塊可以跑起來(lái)^^

location ~ /simg/.*\.jpg$ {
  #proxy_pass   http://10.11.11.11;
  #rewrite "/simg/(.*\.jpg)$" /img/$1 break ;
  image_filter  resize 100 100;
  error_page   415  = /empty;
}

該模塊主要有兩個(gè)指令：
指令1：
語(yǔ)法: image_filter (test | size | resize width height | crop width height)
默認(rèn)是: 無(wú)
可出現(xiàn)的上下文: location
該指令指定圖像的轉(zhuǎn)化形式：
（1）test - 測(cè)試回復(fù)是否是JPEG、GIF、或PNG圖片（不支持BMP等其他格式），出錯(cuò)時(shí)返回415。
（2）size - 返回圖片的JSON數(shù)據(jù)，比如:( "Img": ( "width": 100, "height": 100, "type": "gif"))
（3）resize - 根據(jù)設(shè)置按比例得減小圖像，比如100*100的圖片，而設(shè)置是50*25，減小后的圖片為25*25。如果你只想設(shè)置一個(gè)維度，可以用“-”代替。出錯(cuò)時(shí)返回415。
（4）crop - 根據(jù)設(shè)置按比例得減小圖像，然后裁剪成跟設(shè)置一樣大小的圖片。比如100*100的圖片，而設(shè)置是50*25，減小后的圖片為50*50，Nginx會(huì)選取中間高度25的像素，形成50*25的圖片，所以圖片會(huì)有缺失。如果你只想設(shè)置一個(gè)維度，可以用“-”代替。出錯(cuò)時(shí)返回415。
指令2：
語(yǔ)法: image_filter_buffer size
默認(rèn)值: image_filter_buffer 1M
可出現(xiàn)的位置: http, server, location
該指令設(shè)置單圖片緩存的最大值，如果過(guò)濾的圖片大小超過(guò)緩存大小，會(huì)報(bào)錯(cuò)返回415。

用法
現(xiàn)在開(kāi)始是重點(diǎn)：
有了如上認(rèn)識(shí)再配合locaiont、if、image_filter 就可以讓nginx動(dòng)態(tài)生成縮略圖了。
假設(shè)你的圖片位于/img目錄下
訪問(wèn)縮略圖方式

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

訪問(wèn)原圖方式

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 = &quot;0&quot;) {
        rewrite /img/(.+)_(d+)x(d+).(jpg|gif|png)$ /img/$1.$4 last;
      }
      if ($w = &quot;0&quot;) {
        rewrite /img/(.+)_(d+)x(d+).(jpg|gif|png)$ /img/$1.$4 last;
      }

      #根據(jù)給定的長(zhǎng)寬生成縮略圖
      image_filter resize $h $w;
      #原圖最大2M，要裁剪的圖片超過(guò)2M返回415錯(cuò)誤，需要調(diào)節(jié)參數(shù)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 = &quot;0&quot;) {
        rewrite /img/(.+)_(d+)x(d+).(jpg|gif|png)$ /img/$1.$4 last;
      }
      if ($w = &quot;0&quot;) {
        rewrite /img/(.+)_(d+)x(d+).(jpg|gif|png)$ /img/$1.$4 last;
      }
 
      #根據(jù)給定的長(zhǎng)寬生成縮略圖
      image_filter resize $h $w;
      #原圖最大2M，要裁剪的圖片超過(guò)2M返回415錯(cuò)誤，需要調(diào)節(jié)參數(shù)image_filter_buffer 
      image_filter_buffer 2M;             
      
      #error_page 415       /img/notfound.jpg;
      try_files /img/$1.$4 /img/notfound.jpg; 
    }
 
    location ~* /img {
      
    }

您可能感興趣的文章: