Nginx系列：圖片過濾處理
點(diǎn)擊上方「藍(lán)字」關(guān)注我們
? ? ? http_image_filter_module是Nginx提供的集成圖片處理模塊，支持nginx-0.7.54以后的版本，在網(wǎng)站訪問量不是很高；磁盤有限不想生成多余的圖片文件的前提下，就可以用它實(shí)時(shí)縮放圖片，旋轉(zhuǎn)圖片，驗(yàn)證圖片有效性以及獲取圖片寬高以及圖片類型信息，由于是實(shí)時(shí)計(jì)算的結(jié)果，所以網(wǎng)站訪問量大的話，不建議使用。
? ? ? 安裝還是很簡(jiǎn)單的，默認(rèn)http_image_filter_module模塊是不會(huì)編譯進(jìn)nginx的，所以要在configure時(shí)候指定編譯http_image_filter_module模塊。另外http_image_filter_module模塊需要依賴gd-devel的支持，可以使用yum install gd-devel先安裝，如果未安裝會(huì)報(bào)“/configure: error: the HTTP image filter module requires the GD library.”錯(cuò)誤。
Nginx圖片處理的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
（1）操作簡(jiǎn)單。通過簡(jiǎn)單配置，省去了后端裁剪程序的復(fù)雜性；
（2）實(shí)時(shí)裁剪?？梢詫?shí)時(shí)訪問在線裁剪圖片；
（3）靈活性強(qiáng)。后端程序裁剪圖片時(shí)需要知道裁剪圖片的尺寸和質(zhì)量，使用nginx裁剪可以實(shí)時(shí)裁剪任意尺寸的圖片；
（4）不占用硬盤空間；
缺點(diǎn)
（1）消耗CPU和內(nèi)存，訪問量大的時(shí)候就會(huì)給服務(wù)器帶來很大的負(fù)擔(dān)。(可以通過使用Nginx緩存和緩存服務(wù)器來解決)；
（2）功能不是很強(qiáng)大，支持的處理圖片類型只包括JPEG、GIF、PNG or WebP；
0x01：安裝http_image_filter_module
先安裝gd-devel依賴庫(kù)
yum?install?gd-devel
Nginx添加http_image_filter_module模塊
先查看舊版本Nginx的configure參數(shù)
?/usr/local/nginx/sbin/nginx?-V
configure時(shí)添加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格式的圖像。否則錯(cuò)誤 415 (Unsupported Media Type) 將被返回。
size: 以json格式返回圖像信息。例如：
{?"img"?:?{?"width":?100,?"height":?100,?"type":?"gif"?}?}
如果有錯(cuò)誤發(fā)生，將會(huì)返回如下：
{}
rotate 90|180|270 : 將圖像逆時(shí)針旋轉(zhuǎn)指定角度。參數(shù)的值可以包含變量。可以單獨(dú)使用，或與 resize 和 crop 變換同時(shí)使用.
resize width height:?按比例縮小圖像至指定大小。如果想只指定其中一維，另一維可以指定為：“-”。如果有錯(cuò)誤發(fā)生，服務(wù)器會(huì)返回 415 (Unsupported Media Type). 參數(shù)的值可以包含變量。當(dāng)與 rotate 參數(shù)同時(shí)使用時(shí), 旋轉(zhuǎn)發(fā)生在縮放 之后。
crop width height : 按比例以圖像的最短邊為準(zhǔn)對(duì)圖像大小進(jìn)行縮小，然后裁剪另一邊多出來的部分。如果想只指定其中一維，另一維可以指定為：“-”。如果有錯(cuò)誤發(fā)生，服務(wù)器會(huì)返回 415 (Unsupported Media Type). 參數(shù)的值可以包含變量。當(dāng)與 rotate 參數(shù)同時(shí)使用時(shí), 旋轉(zhuǎn)發(fā)生在裁剪 之前。
image_filter_buffer?
語法:????image_filter_buffer?size;
默認(rèn)值:????image_filter_buffer?1M;
上下文:????http,?server,?location設(shè)置用來讀圖像的緩沖區(qū)的最大值。若圖像超過這個(gè)大小，服務(wù)器會(huì)返回 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ì)量 ?？膳渲弥担? ~ 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)對(duì)PNG，或者GIF圖像進(jìn)行顏色變換時(shí)是否需要保留透明度。損失透明度有可能可以獲得更高的圖像質(zhì)量。PNG圖像中的alpha通道的透明度默認(rèn)會(huì)一直被保留。
image_filter?off;??
#關(guān)閉模塊??
image_filter?test;??
#確保圖片是jpeg?gif?png否則返415錯(cuò)誤??
image_filter?size;??
#輸出有關(guān)圖像的json格式：如下顯示{?"img"?:?{?"width": 100, "height": 100, "type":?"gif"?}?}?出錯(cuò)顯示：{}??
image_filter?rotate?90|180|270;??
#旋轉(zhuǎn)指定度數(shù)的圖像，參數(shù)可以包括變量，單獨(dú)或一起與resize crop一起使用。??
image_filter?resize?width?height;??
#按比例減少圖像到指定大小，如果減少一個(gè)可以另一個(gè)用"-"來表示,出錯(cuò)415，參數(shù)值可包含變量，可以與rotate一起使用，則兩個(gè)一起生效。??
image_filter?crop?width?height;??
#按比例減少圖像比較大的側(cè)面積和另一側(cè)多余的裁剪邊緣，其它和rotate一樣。沒太理解??
image_filter_buffer?10M;??
#設(shè)置讀取圖像緩沖的最大大小，超過則415錯(cuò)誤。??
image_filter_interlace?on;??
#如果啟用，最終的圖像將被交錯(cuò)。對(duì)于JPEG，最終的圖像將在“漸進(jìn)式JPEG”格式。??
image_filter_jpeg_quality?95;??
#設(shè)置變換的JPEG圖像的期望質(zhì)量?？山邮艿闹凳菑?到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)色板中指定的顏色時(shí)，可以保留。透明度的損失將導(dǎo)致更好的圖像質(zhì)量。在PNG的Alpha通道總是保留透明度。
0x03：實(shí)戰(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：附錄
幾個(gè)可能有用的規(guī)則
匹配全站所有的結(jié)尾圖片?
?location?~*?\.(jpg|gif|png)$?{??
????????????image_filter?resize?500?500;??
????????}??
匹配某個(gè)目錄所有圖片
????????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??
自動(dòng)將原圖縮放為300*200的尺寸
掃碼二維碼
獲取更多精彩
Java樂園
