http_image_filter_module是Nginx提供的集成圖片處理模塊，支持nginx-0.7.54以后的版本，在網(wǎng)站訪問量不是很高；磁盤有限不想生成多余的圖片文件的前提下，就可以用它實時縮放圖片，旋轉(zhuǎn)圖片，驗證圖片有效性以及獲取圖片寬高以及圖片類型信息，由于是實時計算的結(jié)果，所以網(wǎng)站訪問量大的話，不建議使用。
安裝還是很簡單的，默認(rèn)http_image_filter_module模塊是不會編譯進(jìn)nginx的，所以要在configure時候指定編譯http_image_filter_module模塊。另外http_image_filter_module模塊需要依賴gd-devel的支持，可以使用yum install gd-devel先安裝，如果未安裝會報“/configure: error: the HTTP image filter module requires the GD library.”錯誤。
Nginx圖片處理的優(yōu)缺點
- 優(yōu)點
（1）操作簡單。通過簡單配置，省去了后端裁剪程序的復(fù)雜性；
（2）實時裁剪。可以實時訪問在線裁剪圖片；
（3）靈活性強(qiáng)。后端程序裁剪圖片時需要知道裁剪圖片的尺寸和質(zhì)量，使用nginx裁剪可以實時裁剪任意尺寸的圖片；
（4）不占用硬盤空間；
- 缺點
（1）消耗CPU和內(nèi)存，訪問量大的時候就會給服務(wù)器帶來很大的負(fù)擔(dān)。(可以通過使用Nginx緩存和緩存服務(wù)器來解決)；
（2）功能不是很強(qiáng)大，支持的處理圖片類型只包括JPEG、GIF、PNG or WebP；
0x01：安裝http_image_filter_module
- 先安裝gd-devel依賴庫
yum install gd-devel
- Nginx添加http_image_filter_module模塊
先查看舊版本Nginx的configure參數(shù)
/usr/local/nginx/sbin/nginx -V
configure時添加http_image_filter_module模塊
/configure --prefix=/usr/local/nginx --user=nginx
--group=nginx --with-http_secure_link_module
--with-http_stub_status_module
--with-stream_ssl_preread_module
--with-http_ssl_module
--with-http_image_filter_module
編譯安裝nginx
make
cp ./objs/nginx /usr/local/nginx/sbin/
0x02：語法說明
- image_filter
語法: image_filter off;
image_filter test;
image_filter size;
image_filter rotate 90 | 180 | 270;
image_filter resize width height;
image_filter crop width height;
默認(rèn)值: —
上下文: location
設(shè)置圖像變換的操作：
off : 在所在location關(guān)閉模塊處理。
test :確保應(yīng)答是JPEG，GIF或PNG格式的圖像。否則錯誤 415 (Unsupported Media Type) 將被返回。
size: 以json格式返回圖像信息。例如：
{ "img" : { "width": 100, "height": 100, "type": "gif" } }
如果有錯誤發(fā)生，將會返回如下：
{}
rotate 90|180|270 : 將圖像逆時針旋轉(zhuǎn)指定角度。參數(shù)的值可以包含變量。可以單獨使用，或與 resize 和 crop 變換同時使用.
resize width height: 按比例縮小圖像至指定大小。如果想只指定其中一維，另一維可以指定為：“-”。如果有錯誤發(fā)生，服務(wù)器會返回 415 (Unsupported Media Type). 參數(shù)的值可以包含變量。當(dāng)與 rotate 參數(shù)同時使用時, 旋轉(zhuǎn)發(fā)生在縮放 之后。
crop width height : 按比例以圖像的最短邊為準(zhǔn)對圖像大小進(jìn)行縮小，然后裁剪另一邊多出來的部分。如果想只指定其中一維，另一維可以指定為：“-”。如果有錯誤發(fā)生，服務(wù)器會返回 415 (Unsupported Media Type). 參數(shù)的值可以包含變量。當(dāng)與 rotate 參數(shù)同時使用時, 旋轉(zhuǎn)發(fā)生在裁剪 之前。
- image_filter_buffer
語法: image_filter_buffer size;
默認(rèn)值: image_filter_buffer 1M;
上下文: http, server, location
設(shè)置用來讀圖像的緩沖區(qū)的最大值。若圖像超過這個大小，服務(wù)器會返回 415 (Unsupported Media Type).
- image_filter_jpeg_quality
語法: image_filter_jpeg_quality quality;
默認(rèn)值: image_filter_jpeg_quality 75;
上下文: http, server, location
設(shè)置變換后的JPEG圖像的 質(zhì)量 。可配置值：1 ~ 100 。更小的值意味著更差的圖像質(zhì)量以及更少需要傳輸?shù)臄?shù)據(jù)。推薦的最大值是95. 參數(shù)的值可以包含變量。
- image_filter_sharpen
語法: image_filter_sharpen percent;
默認(rèn)值: image_filter_sharpen 0;
上下文: http, server, location
增加最終圖像的銳度。銳度百分比可以超過100. 0為關(guān)閉銳化。參數(shù)的值可以包含變量。
- image_filter_transparency
語法: image_filter_transparency on|off;
默認(rèn)值: image_filter_transparency on;
上下文: http, server, location
定義當(dāng)對PNG，或者GIF圖像進(jìn)行顏色變換時是否需要保留透明度。損失透明度有可能可以獲得更高的圖像質(zhì)量。PNG圖像中的alpha通道的透明度默認(rèn)會一直被保留。
image_filter off;
#關(guān)閉模塊 image_filter test; #確保圖片是jpeg gif png否則返415錯誤 image_filter size; #輸出有關(guān)圖像的json格式：如下顯示{ "img" : { "width": 100, "height": 100, "type": "gif" } } 出錯顯示：{}
image_filter rotate 90|180|270;
#旋轉(zhuǎn)指定度數(shù)的圖像，參數(shù)可以包括變量，單獨或一起與resize crop一起使用。
image_filter resize width height;
#按比例減少圖像到指定大小，如果減少一個可以另一個用"-"來表示,出錯415，參數(shù)值可包含變量，可以與rotate一起使用，則兩個一起生效。 image_filter crop width height;
#按比例減少圖像比較大的側(cè)面積和另一側(cè)多余的裁剪邊緣，其它和rotate一樣。沒太理解 image_filter_buffer 10M; #設(shè)置讀取圖像緩沖的最大大小，超過則415錯誤。 image_filter_interlace on; #如果啟用，最終的圖像將被交錯。對于JPEG，最終的圖像將在“漸進(jìn)式JPEG”格式。 image_filter_jpeg_quality 95; #設(shè)置變換的JPEG圖像的期望質(zhì)量。可接受的值是從1到100的范圍內(nèi)。較小的值通常意味著既降低圖像質(zhì)量，減少傳輸數(shù)據(jù)，推薦的最大值為95。參數(shù)值可以包含變量。 image_filter_sharpen 100; #增加了最終圖像的清晰度。銳度百分比可以超過100。零值將禁用銳化。參數(shù)值可以包含變量。 image_filter_transparency on; #定義是否應(yīng)該透明轉(zhuǎn)換的GIF圖像或PNG圖像與調(diào)色板中指定的顏色時，可以保留。透明度的損失將導(dǎo)致更好的圖像質(zhì)量。在PNG的Alpha通道總是保留透明度。
0x03：實戰(zhàn)http_image_filter_module
在Nginx配置文件nginx.conf添加如下配置
location ~* .(jpg|gif|png)$ {
image_filter test; root html; # 圖片默認(rèn)寬度 set $width -;
# 圖片默認(rèn)高度 set $height -;
if ($arg_width != "") {
set $width $arg_width;
} if ($arg_height != "") {
set $height $arg_height;
} # 設(shè)置圖片寬高 image_filter resize $width $height; # 設(shè)置nginx讀取圖片最大buffer image_filter_buffer 10M;
# 是否開啟圖片隔行掃描 image_filter_interlace on; error_page 404 = 400.html;
}
配置完成后，在html目錄新建image目錄
訪問可以查看結(jié)果
http://127.0.0.1/image/3.jpg?height=100
http://127.0.0.1/image/3.jpg?width=130
http://127.0.0.1/image/3.jpg?width=100&height=200
0x04：附錄
幾個可能有用的規(guī)則
- 匹配全站所有的結(jié)尾圖片
location ~* .(jpg|gif|png)$ {
image_filter resize 500 500;
}
匹配某個目錄所有圖片
location ~* /image/.*.(jpg|gif|png)$ {
image_filter resize 500 500;
}
- 使用url指定大小
location ~* (.*.(jpg|gif|png))!(.*)!(.*)$ {
set $width $3;
set $height $4;
rewrite "(.*.(jpg|gif|png))(.*)$" $1;
} location ~* /image/.*.(jpg|gif|png)$ {
image_filter resize $width $height;
}
http://127.0.0.1/image/girl.jpg!300!200
自動將原圖縮放為300*200的尺寸
