點擊上方「藍字」關注我們

? ? ? 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讀取圖片最大bufferimage_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的尺寸

掃碼二維碼

獲取更多精彩

Java樂園

有用！分享+在看?

總結

以上是生活随笔為你收集整理的Nginx系列：图片过滤处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。