1. 程式人生 > >nginx使用image_filter生成縮圖 -- fasdfs海量圖片縮圖整合

nginx使用image_filter生成縮圖 -- fasdfs海量圖片縮圖整合

http_image_filter_module

http_image_filter_module是nginx提供的整合圖片處理模組,支援nginx-0.7.54以後的版本,在網站訪問量不是很高磁碟有限不想生成多餘的圖片檔案的前提下可,就可以用它實時縮放圖片,旋轉圖片,驗證圖片有效性以及獲取圖片寬高以及圖片型別資訊。

1.1 檢視有沒有安裝

# /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

2 模組說明

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通道總是保留透明度。

3 安裝

3.1 安裝gd,HttpImageFilterModule模組需要依賴gd-devel的支援

# yum -y install gd-devel

3.2 將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

4 配置nginx

4.1 正常縮放

# vi /usr/local/nginx/conf/nginx.conf

location ~* /img {
    root /data0; 
    image_filter resize 150 100;
    image_filter rotate 90;      
}

http://img2.mydomain.com/img/w8.png


4.2 fastdfs配置

a)架構與安裝

參考:http://blog.csdn.net/clevercode/article/details/52276169.

b)配置

location ~ group1/M00/(.+)_([0-9]+)x([0-9]+)\.(jpg|gif|png) {
            alias /data0/fastdfs/storage/storage0/data;
            ngx_fastdfs_module;
            set $w $2;
            set $h $3;           

            if ($w != "0") {
                rewrite group1/M00(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ group1/M00$1.$4 break;
            }

            if ($h != "0") {
                rewrite group1/M00(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ group1/M00$1.$4 break;
            }

            #根據給定的長寬生成縮圖   
            image_filter resize $w $h;
            
            #原圖最大2M,要裁剪的圖片超過2M返回415錯誤,需要調節引數image_filter_buffer  
            image_filter_buffer 2M;

            #try_files group1/M00$1.$4 $1.jpg;
        }
        

        location ~ group1/M00/(.+)\.?(.+){
           alias /data0/fastdfs/storage/storage0/data;
           ngx_fastdfs_module;
        }


c)訪問原圖.

http://img2.mydomain.com/group1/M00/00/00/wKhlhFe7DCeAcOvYAAaxqYLWRQk392.png


d)訪問縮圖
http://img2.mydomain.com/group1/M00/00/00/wKhlhFe7DCeAcOvYAAaxqYLWRQk392_80x60.png