1. 程式人生 > >Nginx縮圖和Fastdfs整合以及image_filter配置,7點經驗結論和5個參考資料

Nginx縮圖和Fastdfs整合以及image_filter配置,7點經驗結論和5個參考資料



以下是7點經驗結論和5個參考資料


1.Nginx單獨配置縮圖與Nginx和Fastdfs模組整合,配置是不一樣的。


  非整合模式的配置,類似這樣的:
  location ~* /(\d+)\.(jpg)$ {
set $h $arg_h;   # 獲取引數h的值
set $w $arg_w; # 獲取引數w的值
#image_filter crop $h $w;
image_filter resize $h $w; # 根據給定的長寬生成縮圖
}
 
location ~* /(\d+)_(\d+)x(\d+)\.(jpg)$ {
if ( -e $document_root/$1.$4 ) { # 判斷原圖是否存在
     rewrite /(\d+)_(\d+)x(\d+)\.(jpg)$ /$1.$4?h=$2&w=$3 last;
    }
return 404;
}


  整合模式的配置,類似這樣的:
  location ~ group1/M00/(.+)\.?(.+){
             alias /home/fastdata/data;
             ngx_fastdfs_module;
        }

  Fastdfs的URL比較特殊,group1/M00,自己的實踐體會是,不能隨便改名字。

2.縮圖的配置其實很簡單,難在縮圖和非縮圖共存。

  location ~ group1/M00/(.+)\.?(.+){
             alias /home/fastdata/data;
             ngx_fastdfs_module;
image_filter resize 10 10;
   }
   
3.親自實踐的不可行的方案,或者說最終搞不定的方案。
訪問原圖的URL
http://ip/a.img


訪問縮圖的URL
http://ip/a.img?w=10&h=10


資料庫存的是“a.img”,我希望如果想要獲得縮圖,直接在後面增加url引數,w和h。
因此,我嘗試的Nginx配置:


location  ~ /group1/a/M00(.*).jpg {
 49          root /home/fdfsdata/data;
 50          ngx_fastdfs_module;
 60          if ($w != ""){
 61           # rewrite /group1/M00 /image/resize$request_uri;
 62          }
 63       }
 64 
 69      
 91      location ~ /image/resize/group1/M00 {
 92         #set $h 100;   
 93         #set $w $arg_w;  
 94         #rewrite ^/image/resize http://baidu.com?$request_uri-$document_uri-$query_string-$uri;
 95 #        rewrite /image/resize/group1/M00 http://baidu.com?request_uri=$request_uri;
 96        root /home/fdfsdata/data;
 97          ngx_fastdfs_module;
 98         #image_filter test;
 99         #image_filter size;
100        # image_filter off;
101         image_filter resize 100 100;
102      }


以上只代表了思路,不是“原貌”。
大致的意思,就是
a.攔截圖片,如果寬度w不為空,就rewrite重定向到“/image/resize/group1/M00”,
讓第2個配置,執行 image_filter resize 100 100,獲得縮圖。
b.如果w為空,直接獲得原圖。


總是報400,415之類的錯誤。
最初為了獲得,重定向的url,試了很多方法。
rewrite /group1/M00 /image/resize$request_uri;
最後探索出,上述方式是比較好的。


但是,最後發現Fastdfs的路徑,不能隨便改,修改了,容易出現400、404,或415.


為了探索url中的一些引數,比如$1,$request_uri等,網上看了一些資料,知道了大致的意思。
在參考別人的之前,我想到了一種方法,
rewrite ^/image/resize http://baidu.com?$request_uri-$document_uri-$query_string-$uri;
重定向到一個明確的頁面,比如百度的首頁,把引數放到?之後,然後在瀏覽器的位址列就可以看到了。


嘗試使用了echo命令,Nginx不可識別。
網上找到了,Nginx有echo模組,大概是說,安裝了echo模組,方便在Nginx用echo輸出變數,方便除錯。


4.if ($w != "")。

Nginx的if語句,左右貌似需要空格~
坑~


5.nginx之location配置
http://blog.csdn.net/hellochenlian/article/details/44655547
  值得好好學習下
  沒有系統學習Nginx,感覺很多時候,比較吃虧。
  我打算2016年認真學習Nginx,買本好書,系統地學習下。
  一點點地學,很累,記不住~
  
6.其實,不一定要非要用Nginx的image_filter模組實現縮圖。
也可以用程式控制,比如上傳圖片的時候,實時生成多種尺寸的圖片,存到Fastdfs。
優點和缺點,還是經典的“時間”和“空間”問題。


7.最終可行Nginx配置
location ~ /group1/M00/(.*)_([0-9]+)x([0-9]+)\.jpg{
 71          root /home/fdfsdata/data;
 72          ngx_fastdfs_module;
 73          set $w $2;
 74          set $h $3;
 75  #           if ($h != "0") {
 76                #      rewrite /group1/M00/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /group1/M00/$1.$4 last;
 77 #                rewrite group1/M00(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ group1/M00$1.$4 break;
 78   #          } 
 79             if ($w != "0") {
 80                    rewrite /group1/M00/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /group1/M00/$1.$4 break;
 81             }
 82             image_filter resize $w $h;
 83             image_filter_buffer 2M;
 84       }
 85 
 86    location ~ group1/M00/(.+)\.?(.+){
 87            alias /home/fastdata/data;
 88            ngx_fastdfs_module;
 89    }


 需要注意,用的小寫的“x”。
 
 訪問舉例:
 獲得原圖
 http://42.96.184.84:8080/group1/M00/00/00/KmC4VFY7GsiATWTJAAA3vrrOOWM943.jpg


 縮圖1

 http://42.96.184.84:8080/group1/M00/00/00/KmC4VFY7GsiATWTJAAA3vrrOOWM943_100x30.jpg


 
 縮圖2
 http://42.96.184.84:8080/group1/M00/00/00/KmC4VFY7GsiATWTJAAA3vrrOOWM943_150x50.jpg


 
 沒有搞成功的,最初嘗試的方案
 http://42.96.184.84:8080/group1/M00/00/00/KmC4VFY7GsiATWTJAAA3vrrOOWM943.jpg?w=10&h=10
 
 資料庫存的URL:group1/M00/00/00/KmC4VFY7GsiATWTJAAA3vrrOOWM943.jpg
 如果要按照KmC4VFY7GsiATWTJAAA3vrrOOWM943_150x50.jpg展示,需要獲得檔名,修改,加上指定的寬度和高度
 _150x50.
 
8.參考資料
    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