1. 程式人生 > >nginx實現圖片的縮放和裁剪

nginx實現圖片的縮放和裁剪

最近在做桌布的專案,會要求根據原圖生成不同的解析度來適配手機。目前設計的方案是隻儲存一張原圖,不同解析度的圖片在請求時根據原圖動態裁剪,nginx層實現。

例:

原圖url:http://s.qdcdn.com/cl/12526976.jpg

客戶端請求的url:http://s.qdcdn.com/cl/12526976,240x400.jpg

則在請求時,伺服器nginx層根據原圖,動態裁剪出240x400解析度的圖片返回給客戶端。

nginx層使用http_image_filter_module模組:

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


我們的業務訪問量也很大,但是用到了cdn,即訪問順序是cdn->nginx->圖片伺服器,cdn會回源訪問nginx,nginx動態生成指定解析度的圖片後,下次使用者再訪問此解析度圖片時,cdn上已經有了快取,會大大減少並發動態生成縮圖的訪問量。

http_image_filter_module模組的安裝請自行網上查閱,本文不再講述。重點講下http_image_filter_module生成縮圖的兩個命令。

http_image_filter_module有以下6個命令,這裡重點講述resize命令和crop命令:



這裡我簡單做下翻譯:

resize - 根據設定按比例得減小影象。比如100*100的圖片,而設定是50*25,減小後的圖片為25*25。如果你只想設定一個維度,可以用“-”代替。出錯時返回415。
crop

- 根據設定按比例得減小影象,然後裁剪成跟設定一樣大小的圖片。比如100*100的圖片,而設定是50*25,減小後的圖片為50*50,Nginx會選取中間高度25的畫素,形成50*25的圖片,所以圖片會有缺失。如果你只想設定一個維度,可以用“-”代替。出錯時返回415。

大家應該看出了兩個命令的區別:resize是會保持原圖的縱橫比去做縮放,不會做裁剪;crop是縮放的基礎上按指定的解析度去裁剪多餘的部分。

可以簡單的如下記憶:

resize -最小邊縮小圖片保持圖片完整性
crop -最大邊縮放圖片後擷取多餘的部分

公司當前伺服器使用的是resize命令,我此次的專案是需要在原圖的基礎上裁剪出桌布的,所以我要使用的是crop命令。

nginx伺服器配置:

原圖地址 location配置圖片伺服器路徑即可

縮圖的地址 用正則匹配yrl,拿到寬、高後在裡面呼叫resizewidthheight或cropwidthheight即可