nginx圖片處理

 

前言

無論一個系統或網站的大與小，都存在相應的圖片處理，生成縮略圖、爲圖片加水印等等，若是涉及到APP端，這個圖片的處理需求變得更加劇要了，由於在目前看來，客戶端的屏幕大小不一，會致使如下問題： 
一、圖片過大致使APP加載圖片速度慢； 
二、消耗用戶過多流量。

---

思路

一、APP請求圖片，並提供須要圖片的尺寸信息，nginx通過攔截後，處理並緩存圖片。 
二、當app下次請求一樣的圖片時，nginx直接取緩存中的圖片返回給APP（這個暫不深究）。

nginx圖片處理流程圖

具體實現步驟：

一、nginx_http_image_filter_module在nginx 0.7.54之後纔出現的，用於對JPEG, GIF和PNG圖片進行轉換處理這個模塊默認不被編譯，因此要在編譯nginx源碼的時候，加入相關配置信息（略） 
二、ngx_http_image_filter_module指令（nginx官網）

location /img/ {
 proxy_pass http://backend;
 image_filter resize 150 100;
 image_filter rotate 90;
 error_page 415 = /empty;
}

location = /empty {
 empty_gif;
}

三、http_image_filter_module指令的配置本地nginx

location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
     set $w $3;
 set $h $4;
 rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
 image_filter resize $w $h;
}

四、運行結果： 
（1）

 
（2）

疑問：這兩張圖片看上去，怎麼看也不是一個正方形？ 
解答：http_image_filter_module模塊的image_filter 指令決定了，語法: image_filter (test | size | resize width height | crop width height)，這裏用到了 resize width height；resize：就是根據設置按比例獲得圖片； 
疑問：怎麼才能獲得設置的真實的大小，好比100x100，就獲得一張100x100的圖片？ 
解答：進行剪裁，用到的是 crop width height 
五、配置

location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
     set $w $3;
 set $h $4;
 rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
 image_filter resize $w $h;
 image_filter crop $w $h;
}

六、運行結果： 
（1）

（2）

七、到此就已經實現了生成縮略圖的配置了，若是還須要其餘的操做，好比，將圖片旋轉，就是用rotate就能夠了，其餘就不作過多的描述。 
八、配置

location ~* (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ {
     set $w $3;
 set $h $4;
 set $rotate $5;
 rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)!(.*)$ $1 break;
 image_filter resize $w $h;
 image_filter crop $w $h;
 image_filter rotate $rotate;}