前言

不管一個(gè)系統(tǒng)或網(wǎng)站的大與小，都存在相應(yīng)的圖片處理，生成縮略圖、為圖片加水印等等，如果涉及到APP端，這個(gè)圖片的處理需求變得更加重要了，因?yàn)樵谀壳翱磥?lái)，客戶端的屏幕大小不一，會(huì)導(dǎo)致以下問(wèn)題： 
1、圖片過(guò)大導(dǎo)致APP加載圖片速度慢； 
2、消耗用戶過(guò)多流量。

---

思路

1、APP請(qǐng)求圖片，并提供需要圖片的尺寸信息，nginx經(jīng)過(guò)攔截后，處理并緩存圖片。 
2、當(dāng)app下次請(qǐng)求同樣的圖片時(shí)，nginx直接取緩存中的圖片返回給APP（這個(gè)暫不深究）。

nginx圖片處理流程圖

具體實(shí)現(xiàn)步驟：

1、nginx_http_image_filter_module在nginx 0.7.54以后才出現(xiàn)的，用于對(duì)JPEG, GIF和PNG圖片進(jìn)行轉(zhuǎn)換處理這個(gè)模塊默認(rèn)不被編譯，所以要在編譯nginx源碼的時(shí)候，加入相關(guān)配置信息（略） 
2、ngx_http_image_filter_module指令（nginx官網(wǎng)）

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、運(yùn)行結(jié)果： 
（1）

 
（2）

疑問(wèn)：這兩張圖片看上去，怎么看也不是一個(gè)正方形？ 
解答：http_image_filter_module模塊的image_filter 指令決定了，語(yǔ)法: image_filter (test | size | resize width height | crop width height)，這里用到了 resize width height；resize：就是根據(jù)設(shè)置按比例得到圖片； 
疑問(wèn)：怎么才能得到設(shè)置的真實(shí)的大小，比如100x100，就得到一張100x100的圖片？ 
解答：進(jìn)行剪裁，用到的是 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、運(yùn)行結(jié)果： 
（1）

（2）

7、到此就已經(jīng)實(shí)現(xiàn)了生成縮略圖的配置了，如果還需要其他的操作，比如，將圖片旋轉(zhuǎn)，就是用rotate就可以了，其他就不做過(guò)多的描述。 
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;
}