nginx圖片處理

 

前言

不管一個系統或網站的大與小，都存在相應的圖片處理，生成縮略圖、為圖片加水印等等，如果涉及到APP端，這個圖片的處理需求變得更加重要了，因為在目前看來，客戶端的屏幕大小不一，會導致以下問題： 
1、圖片過大導致APP加載圖片速度慢； 
2、消耗用戶過多流量。

---

思路

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

nginx圖片處理流程圖

具體實現步驟：

1、nginx_http_image_filter_module在nginx 0.7.54以后才出現的，用於對JPEG, GIF和PNG圖片進行轉換處理這個模塊默認不被編譯，所以要在編譯nginx源碼的時候，加入相關配置信息（略） 
2、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;
}

3、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;
}

4、運行結果： 
（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 
5、配置

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;
}

6、運行結果： 
（1）

（2）

7、到此就已經實現了生成縮略圖的配置了，如果還需要其他的操作，比如，將圖片旋轉，就是用rotate就可以了，其他就不做過多的描述。 
8、配置

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;
}