http_image_filter_module是Nginx提供的集成圖片處理模塊,支持nginx-0.7.54以后的版本,在網站訪問量不是很高;磁盤有限不想生成多余的圖片文件的前提下,就可以用它實時縮放圖片,旋轉圖片,驗證圖片有效性以及獲取圖片寬高以及圖片類型信息,由於是實時計算的結果,所以網站訪問量大的話,不建議使用。
安裝還是很簡單的,默認http_image_filter_module模塊是不會編譯進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圖片處理的優缺點
- 優點
(1)操作簡單。通過簡單配置,省去了后端裁剪程序的復雜性;
(2)實時裁剪。可以實時訪問在線裁剪圖片;
(3)靈活性強。后端程序裁剪圖片時需要知道裁剪圖片的尺寸和質量,使用nginx裁剪可以實時裁剪任意尺寸的圖片;
(4)不占用硬盤空間;
- 缺點
(1)消耗CPU和內存,訪問量大的時候就會給服務器帶來很大的負擔。(可以通過使用Nginx緩存和緩存服務器來解決);
(2)功能不是很強大,支持的處理圖片類型只包括JPEG、GIF、PNG or WebP;
0x01:安裝http_image_filter_module
- 先安裝gd-devel依賴庫
yum install gd-devel

- Nginx添加http_image_filter_module模塊
先查看舊版本Nginx的configure參數
/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; 默認值: — 上下文: location
設置圖像變換的操作:
off : 在所在location關閉模塊處理。
test :確保應答是JPEG,GIF或PNG格式的圖像。否則錯誤 415 (Unsupported Media Type) 將被返回。
size: 以json格式返回圖像信息。例如:
{ "img" : { "width": 100, "height": 100, "type": "gif" } }
如果有錯誤發生,將會返回如下:
{}
rotate 90|180|270 : 將圖像逆時針旋轉指定角度。參數的值可以包含變量。可以單獨使用,或與 resize 和 crop 變換同時使用.
resize width height: 按比例縮小圖像至指定大小。如果想只指定其中一維,另一維可以指定為:“-”。如果有錯誤發生,服務器會返回 415 (Unsupported Media Type). 參數的值可以包含變量。當與 rotate 參數同時使用時, 旋轉發生在縮放 之后。
crop width height : 按比例以圖像的最短邊為准對圖像大小進行縮小,然后裁剪另一邊多出來的部分。如果想只指定其中一維,另一維可以指定為:“-”。如果有錯誤發生,服務器會返回 415 (Unsupported Media Type). 參數的值可以包含變量。當與 rotate 參數同時使用時, 旋轉發生在裁剪 之前。
- image_filter_buffer
語法: image_filter_buffer size; 默認值: image_filter_buffer 1M; 上下文: http, server, location
設置用來讀圖像的緩沖區的最大值。若圖像超過這個大小,服務器會返回 415 (Unsupported Media Type).
- image_filter_jpeg_quality
語法: image_filter_jpeg_quality quality; 默認值: image_filter_jpeg_quality 75; 上下文: http, server, location
設置變換后的JPEG圖像的 質量 。可配置值:1 ~ 100 。更小的值意味着更差的圖像質量以及更少需要傳輸的數據。推薦的最大值是95. 參數的值可以包含變量。
- image_filter_sharpen
語法: image_filter_sharpen percent; 默認值: image_filter_sharpen 0; 上下文: http, server, location
增加最終圖像的銳度。銳度百分比可以超過100. 0為關閉銳化。參數的值可以包含變量。
- image_filter_transparency
語法: image_filter_transparency on|off; 默認值: image_filter_transparency on; 上下文: http, server, location
定義當對PNG,或者GIF圖像進行顏色變換時是否需要保留透明度。損失透明度有可能可以獲得更高的圖像質量。PNG圖像中的alpha通道的透明度默認會一直被保留。
image_filter off; #關閉模塊 image_filter test; #確保圖片是jpeg gif png否則返415錯誤 image_filter size; #輸出有關圖像的json格式:如下顯示{ "img" : { "width": 100, "height": 100, "type": "gif" } } 出錯顯示:{} image_filter rotate 90|180|270; #旋轉指定度數的圖像,參數可以包括變量,單獨或一起與resize crop一起使用。 image_filter resize width height; #按比例減少圖像到指定大小,如果減少一個可以另一個用"-"來表示,出錯415,參數值可包含變量,可以與rotate一起使用,則兩個一起生效。 image_filter crop width height; #按比例減少圖像比較大的側面積和另一側多余的裁剪邊緣,其它和rotate一樣。沒太理解 image_filter_buffer 10M; #設置讀取圖像緩沖的最大大小,超過則415錯誤。 image_filter_interlace on; #如果啟用,最終的圖像將被交錯。對於JPEG,最終的圖像將在“漸進式JPEG”格式。 image_filter_jpeg_quality 95; #設置變換的JPEG圖像的期望質量。可接受的值是從1到100的范圍內。較小的值通常意味着既降低圖像質量,減少傳輸數據,推薦的最大值為95。參數值可以包含變量。 image_filter_sharpen 100; #增加了最終圖像的清晰度。銳度百分比可以超過100。零值將禁用銳化。參數值可以包含變量。 image_filter_transparency on; #定義是否應該透明轉換的GIF圖像或PNG圖像與調色板中指定的顏色時,可以保留。透明度的損失將導致更好的圖像質量。在PNG的Alpha通道總是保留透明度。
0x03:實戰http_image_filter_module
在Nginx配置文件nginx.conf添加如下配置
location ~* \.(jpg|gif|png)$ { image_filter test; root html; # 圖片默認寬度 set $width -; # 圖片默認高度 set $height -; if ($arg_width != "") { set $width $arg_width; } if ($arg_height != "") { set $height $arg_height; } # 設置圖片寬高 image_filter resize $width $height; # 設置nginx讀取圖片最大buffer image_filter_buffer 10M; # 是否開啟圖片隔行掃描 image_filter_interlace on; error_page 404 = 400.html; }
配置完成后,在html目錄新建image目錄

訪問可以查看結果
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:附錄
幾個可能有用的規則
- 匹配全站所有的結尾圖片
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的尺寸