nginx利用image_filter動態生成縮略圖

"我如今是有些圖片須要生成縮略圖,這個如今加了image_filter這個已經實現了,但我不知道怎麼樣才能訪問我上傳的原圖"

剛開始以爲也不太好弄,讓他用程序區處理,實際上稍微動腦筋分析一下也能夠不修改程序實現動態生成縮略圖且可以訪問原圖。 nginx

前提是須要定好圖片的訪問規則。 緩存

先來看一下什麼是nginx的image filter模塊。 測試

HttpImageFilterModule用來裁剪過大的圖片到指定大小,是nginx自帶模塊,默認不會開啓
開啓HttpImageFilterModule須要在編譯要帶上參數 --with-http_image_filter_module spa

該模塊主要有兩個指令:
語法: image_filter (test | size | resize width height | crop width height)
默認是: 無
可出現的上下文: location code

該指令指定圖像的轉化形式: server

test - 測試回覆是不是JPEG、GIF、或PNG圖片(不支持BMP等其餘格式),出錯時返回415。
size - 返回圖片的JSON數據,好比:( "Img": ( "width": 100, "height": 100, "type": "gif"))
resize - 根據設置按比例得減少圖像,好比100*100的圖片,而設置是50*25,減少後的圖片爲25*25。若是你只想設置一個維度,能夠用「-」代替。出錯時返回415。
crop - 根據設置按比例得減少圖像,而後裁剪成跟設置同樣大小的圖片。好比100*100的圖片,而設置是50*25,減少後的圖片爲50*50,Nginx會選取中間高度25的像素,造成50*25的圖片,因此圖片會有缺失。若是你只想設置一個維度,能夠用「-」代替。出錯時返回415。 圖片

語法: image_filter_buffer size
默認值: image_filter_buffer 1M
可出現的位置: http, server, location it

該指令設置單圖片緩存的最大值,若是過濾的圖片大小超過緩存大小,會報錯返回415。 io

如今開始時重點: 編譯

有了如上認識再配合locaiont、if、image_filter 就能夠讓nginx動態生成縮略圖了。

假設你的圖片位於/img目錄下

訪問縮略圖方式

http://www.xxx.cn/img/9GUMJR7200AJ0003_90x90.jpg

訪問原圖方式

http://www.xxx.cn/img/9GUMJR7200AJ0003_90x0.jpg

http://www.xxx.cn/img/9GUMJR7200AJ0003_0x50.jpg

http://www.xxx.cn/img/9GUMJR7200AJ0003_0x0.jpg

http://www.xxx.cn/img/9GUMJR7200AJ0003.jpg

添加以下配置到server上下文便可

location ~* /img/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ {            
            set $h $2;
            set $w $3;
            if ($h = "0") {
                rewrite /img/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /img/$1.$4 last;
            }
            if ($w = "0") {
                rewrite /img/(.+)_(\d+)x(\d+)\.(jpg|gif|png)$ /img/$1.$4 last;
            }

            #根據給定的長寬生成縮略圖
            image_filter resize $h $w;
            #原圖最大2M,要裁剪的圖片超過2M返回415錯誤,須要調節參數image_filter_buffer 
            image_filter_buffer 2M;                          
            
            #error_page  415              /img/notfound.jpg;
            try_files /img/$1.$4  /img/notfound.jpg;	
        }

        location ~* /img {
            
        }

http://wiki.nginx.org/HttpImageFilterModule

相關文章
相關標籤/搜索