Nginx image_filter圖片動態縮略模塊

在實際業務開發過程中，我們常遇到這樣的問題：一張1000X1000像素的PNG圖片上傳後需要按照不同的等比像素顯示在不同平台上。例如在網上將這張原始圖片按照600X600像素顯示出來，在手機上按照400X400像素顯示出來，在平板設備的圖片列表頁面上按照100X100像素進行顯示。並且由於外部各種因素的變化，在不同設備上顯示同一張圖片的大小也在不停的變化。

通常讀者會怎樣處理這樣的業務功能呢？最直接最能夠立即想到，也是處理方式最簡單的辦法，就是將圖片按照原始大小傳輸到客戶端，再由客戶端 Html5代碼、Android代碼、Object-C代碼等客戶端編程語言進行圖片處理。但是這樣做的缺點 也是很明顯的：1000X1000像素的PNG圖片大小普遍在100KB~200KB之間，這會導致多張圖片傳輸時佔用巨大的伺服器寬頻資源。如果有100個用戶同時請求圖片資源，那麼瞬時寬頻達到100Mbps~200Mbps。

當然，還有另外的處理方式可以顯著節約寬頻資源：當這個1000X1000像素的原始圖片上傳時，伺服器端除了保存原圖，還同時按照客戶端當前的圖片尺寸要求，分別生成600X600像素、400X400像素、100X100像素的縮略圖一通保存到伺服器端。當客戶端需要使用同一張圖片的不同像素文件時，調用不同的保存路徑就行了。一張400X400像素的PNG圖片大小普通為20KB~40KB，顯然這比傳輸原始圖片本身減輕了不少的網路寬頻壓力。當然這也做的問題還是很明顯的：

如果要在圖片文件完成上傳時就生成固定大小的縮略圖，那麼這些縮略圖的尺寸從開始就最好是固定的。很難想像當客戶端圖片要求為每張商品原圖增加一張300X300像素的縮略圖時，服務端開發人員能在很短的時間內完成目前以存放在服務端的20000000張商品原圖的新尺寸縮略圖的生成動作。

磁碟空間也是一個問題，正式系統的圖片文件一般存放在分散式文件系統上，例如MFS分散式文件系統、Ceph分散式文件系統，又或者是類似淘寶的TFS分散式文件系統，當然採用塊存儲方案的圖片伺服器也是有的（例如EMC提供的大型盤陣系統）。他們的共同特點都是可以提供海量的文件存儲空間（例如100TB）。但是技術團隊的要求一定都是利用有限的空間儘可能的多存儲數據。所以如果使用類似的方法，200KB的原始文件就可能需要400KB甚至更多的磁碟空間進行存儲，這樣顯然是不太符合要求的。

如果你需要使用Nginx的動態縮略圖模塊，就需要重新編譯安裝Nginx,並在安裝時指定。

首先查看nginx在安裝時開啟了哪些模塊，使用 .inx -V 可以查看模塊開啟情況，更準確的說是將安裝nginx時編譯階段執行的 ./configure 命令的原樣輸出，如果編譯的時候添加了 --with-http_image_filter_module 那麼表示nginx就能直接支持圖片縮略圖，另外編譯之前要提前安裝gd-devel這個庫，如果沒安裝可以使用rpm或者yum在線安裝的方式 yum -y install gd-devel 進行安裝，安裝之後再在原有參數上添加上面的參數編譯安裝nginx即可開啟模塊

現在我們來看看image_filter模塊的主要語法：

image_filter test:測試當前原始圖片是否是JPEG、GIF或PNG圖片，如果測試過程出現錯誤則返回415.

image_filter rotate 90|180|270：這個語法可以讓image_filter模塊按照90°、180°、270°這3個角度旋轉圖片。

image_filter size:以JSON格式輸出圖片寬度、高度、類型。

image_filter resize [width][height]:在保持圖片比例的前提下，根據給定的長寬生成縮略圖。

image_filter crop[width][height]:以其最大邊縮放圖片後截取多餘的部分。

image_filter_jpeg_quality:設置JPEG圖片的壓縮質量比例，例如設置為75，則表示JPEG圖片的壓縮質量比為75%。

image_filter_buffer:單張原始圖片最大大小，默認為1MB;如果原始圖片超過這個值，則image_filter模塊會報錯。按照伺服器端存儲的圖片大小，最好設置一個兼容性較好的值

以下是一段image_filter模塊在Nginx配置文件中的設置信息：

#不區分大小進行正則表達式匹配

#只要滿足以下表達式的請求路徑，則進行圖片動態縮略圖的生成

location ~* /(.+).(jpg|gif|png|ioc|jpeg)_(d+)_(d+)s {

#將以上正則表達式第3個區域設置的數值傳入變數「w」

set $w $3

#將以上正則表達式第4個區域設置的數值傳入變數「h」

set $h $4

#將rewrite後的地址重新在當前的location標籤執行，以便找到原始圖片

rewrite /(.+).(jpg|gif|png|ioc|jpeg)_(d+)_(d+)$ /$1.$2 break;

#按照寬頻w和高度h，將原始圖片進行等比例縮放

image_filter resize $w $h;

#設置單張原始圖片的最大值為10MB

image_filter_buffer 10M;

#設置圖片所在的根目錄

root /home/nodejs/BDK/public/upload/;

}

Nginx 配置文件的其他部分不會受到圖片模塊的影響，看一個圖片url如下：

http://xxxxx.com/jojlnlk456xxxlml.png_800_800

ok，這樣就可以了

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！