nginx利用image_filter動態生成縮略圖

jopen 10年前發布 | 56K 次閱讀 Web服務器 Nginx

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

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

前提是需要定好圖片的訪問規則。

先來看一下什么是nginx的image filter模塊。

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

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

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

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

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

現在開始時重點:

有了如上認識再配合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 {

    }</pre> <p style="padding-bottom:0px;line-height:25px;margin-top:0px;font-family:Verdana,'BitStream vera Sans',Tahoma,Helvetica,sans-serif;margin-bottom:10px;color:#555555;font-size:14px;padding-top:0px;">推薦閱讀:</p>

http://wiki.nginx.org/HttpImageFilterModule

http://nginx.org/en/docs/http/ngx_http_image_filter_module.html

http://cwtea.blog.51cto.com/4500217/1333142

轉自:http://www.nginx.cn/2160.html

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!