一 摘要
1 nginx 安裝和配置
2 nginx 圖片縮略模塊image_filter安裝和配置
3 image_filter和fastdfs 模塊整合
二 詳細介紹
1 http_image_filter_module 介紹
http_image_filter_module是nginx提供的集成圖片處理模塊,支持nginx-0.7.54以後的版本,在網站訪問量不是很高磁盤有限不想生成多餘的圖片文件的前提下可,就可以用它實時縮放圖片,旋轉圖片,驗證圖片有效性以及獲取圖片寬高以及圖片類型信息。
安裝2 安裝nginx http_image_filter_module模塊
a 前置任務安裝gd-devel
#gd-devel 是HttpImageFilterModule模塊所依賴的
# yum -y install gd-develb 安裝 nginx
#將http_image_filter_module包含進來
# cd /usr/local/src/nginx
# ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module --add-module=/usr/local/src/fastdfs/fastdfs-nginx-module/src--with-http_image_filter_module
# make && make install
c 如果nginx已經安裝了 (只需要查看有沒有安裝 http_image_filter_module)
# /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.5.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-17) (GCC)
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module --add-module=/usr/local/src/nginx/fastdfs-nginx-module/src
在configure arguments:後面顯示的原有的configure參數如下:
configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module
#或者arguments:後面什麼都沒有那麼就應該切換到源碼包:
cd /usr/local/src/nginx-1.9.9 你的源碼放在那,就cd到那裏。
#我們的新配置信息就應該這樣寫:
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_image_filter_module
#運行上面的命令即可,等配置完 成後,運行命令
make
#這裏不要進行make install,否則就是覆蓋安裝
#然後備份原有已安裝好的nginx
cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
#然後將剛剛編譯好的nginx覆蓋掉原有的nginx(這個時候nginx需要要停止掉)
cp ./objs/nginx /usr/local/nginx/sbin/
然後啓動nginx,仍可以通過命令查看模塊是否已經加入成功
/usr/local/nginx/sbin/nginx -V
3 nginx 中配置image_filter(沒有和fastdfs整合的)
a http_image_filter_module 簡單介紹
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;
#截取圖片的一部分,從左上角開始截取,尺寸寫小了,圖片會被剪切
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通道總是保留透明度。
b http_image_filter_module 配置
vi /usr/local/nginx/conf/nginx.conf
location ~* /img {
root /data0;
image_filter resize 150 100;
image_filter rotate 90;
}
4 fastdfs整合 image_filter
location ~ /group1/M00/(.*)_([0-9]+)x([0-9]+)\.(jpg|gif|png){
root /home/fdfsdata/data;
ngx_fastdfs_module;
set $w $2;
set $h $3;
if ($h != "0") {
# rewrite /group1/M00/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /group1/M00/$1.$4 last; 如果是last if 括號外的後續代碼就不執行了
rewrite group1/M00(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ group1/M00$1.$4 break;
}
if ($w != "0") {
rewrite /group1/M00/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /group1/M00/$1.$4 break;
}
image_filter crop $w $h;
image_filter_buffer 2M;
}
location ~ group1/M00/(.+)\.?(.+){
alias /home/fastdata/data;
ngx_fastdfs_module;
}
#a.攔截圖片,如果寬度w不爲空,就rewrite重定向到“/image/resize/group1/M00”,
#讓第2個配置,執行 image_filter resize 100 100,獲得縮略圖。
#b.如果w爲空,直接獲得原圖。
5 舉例
http://ip:port/group1/M00/00/00/KmC4VFY7GsiATWTJAAA3vrrOOWM943.jpg
裁剪後的鏈接
http://ip:port/group1/M00/00/00/KmC4VFY7GsiATWTJAAA3vrrOOWM943_100x30.jpg
三 總結
生成縮略是個消耗cpu的操作,如果訪問量比較大的站點,最好考慮使用程序生成縮略圖到硬盤上,
或者在前端加上cache或者使用CDN。所以下面我們配置將生成的縮略圖保存到硬盤供下次訪問。
不一定要非要用Nginx的image_filter模塊實現縮略圖。
也可以用程序控制,比如上傳圖片的時候,實時生成多種尺寸的圖片,存到Fastdfs。
優點和缺點,還是經典的“時間”和“空間”問題
四 參考
FastDFS組合nginx的http_image_filter_module建立的圖片服務器(最關鍵,可行方法,在帖子的最後面)
http://bbs.chinaunix.net/thread-4058548-1-1.html
nginx生成縮略圖配置 – ttlsa教程系列之nginx(參考)
http://www.ttlsa.com/nginx/nginx-modules-image_filter_module/
Nginx國人開發縮略圖模塊(ngx_image_thumb)(參考,和上面的類似)
http://www.ttlsa.com/nginx/nginx-modules-ngx_image_thumb/
Nginx圖片剪裁模塊探究 http_image_filter_module
http://cwtea.blog.51cto.com/4500217/1333142
nginx之location配置
http://blog.csdn.net/hellochenlian/article/details/44655547