## 寫在前面 > 今天想寫一篇使用Nginx如何生成縮圖的文章，想了半天題目也沒想好，這個題目還是一名讀者幫我起的。起因就是這位讀者最近出去面試，面試官正好問了一個Nginx如何生成縮圖的問題。還別說，就是這麼巧呀！！就衝這標題，也要寫一篇乾貨滿滿的技術好文！！ > > 關於Nginx的安裝，小夥伴們可以參考《[【Nginx】實現負載均衡、限流、快取、黑白名單和灰度釋出，這是最全的一篇了！](https://mp.weixin.qq.com/s?__biz=Mzg3MzE1NTIzNA==&mid=2247485406&idx=1&sn=fa58c80adf12e515b3fd3948a2bdfdd7&chksm=cee51813f9929105674b8956f37891d6f48df1dc814e7a4d33276c5d2e06987ff970ca8d1bf9&token=870009680&lang=zh_CN#rd)》 > > 還有就是，小夥伴們如果對文章有什麼好的建議和意見，或者在閱讀文章時，有什麼疑問，都可以在留言區進行留言！！ ## 生成縮圖方案 為了手機端瀏覽到與手機解析度相匹配的圖片，提高 APP 訪問速度以及減少使用者的手機流量，需要將圖片生成縮圖，這邊共有以下解決方案。 * A.釋出新聞生成多重縮圖 – 無法匹配到各種尺寸圖片 * B.當相應縮圖不存在，則使用 PHP 或者 Java 等程式生成相應縮圖 – 需要程式設計師協助 * C.使用 Nginx 自帶模組生成縮圖 – 運維即可完成 * D.使用 Nginx＋Lua 生成縮圖 經過多方的考慮，決定使用方案 C，使用 Nginx 自帶模組生成縮圖。 ## Nginx生成縮圖 ### 配置Nginx 使用 Nginx 自帶模組生成縮圖，模組： --with-http_image_filter_module，例如，我們可以使用如下引數安裝Nginx： ```bash ./configure --prefix=/usr/local/nginx-1.19.1 --with-http_stub_status_module --with-http_realip_module --with-http_image_filter_module --with-debug ``` 接下來，修改 nginx.conf 配置檔案，或者將下面的配置放到nginx.conf檔案相應的 server 塊中。 ```bash location ~* /(\d+)\.(jpg)$ { set $h $arg_h; # 獲取引數ｈ的值 set $w $arg_w; # 獲取引數 w 的值 #image_filter crop $h $w; image_filter resize $h $w;# 根據給定的長寬生成縮圖 } location ~* /(\d+)_(\d+)x(\d+)\.(jpg)$ { if ( -e $document_root/$1.$4 ) { # 判斷原圖是否存在 rewrite /(\d+)_(\d+)x(\d+)\.(jpg)$ /$1.$4?h=$2&w=$3 last; } return 404; } ``` ### 訪問圖片 配置完成後，我們就可以使用類似如下的方式來訪問圖片。 http://www.binghe.com/123_100x10.jpg 當我們在瀏覽器位址列中輸入上面的連結時，Nginx會作出如下的邏輯處理。 * 首先判斷是否存在原圖 123.jpg,不存在直接返回 404（如果原圖都不存在，那就沒必要生成縮圖了） * 跳轉到 http://www.binghe.com/123.jpg?h=100&w=10，將引數高 h=100 和寬 w=10 帶到 url 中。 * Image_filter resize 指令根據 h 和 w 引數生成相應縮圖。 **注意：使用Nginx生成等比例縮圖時有一個長寬取小的原則，`例如原圖是 100*10,你傳入的是 10*2，那麼Nginx會給你生成 10*1 的圖片`。生成縮圖只是 image_filter 功能中的一個，它一共支援 4 種引數：** * test：返回是否真的是圖片 * size：返回圖片長短尺寸，返回 json 格式資料 * corp：擷取圖片的一部分，從左上角開始擷取，尺寸寫小了，圖片會被剪下 * resize：縮放圖片，等比例縮放 ### Nginx 生成縮圖優缺點 **優點：** * 根據傳入引數即可生成各種比例圖片 * 不佔用任何硬碟空間 **缺點：** * 消耗 CPU * 訪問量大將會給伺服器帶來比較大的負擔 **建議：** 生成縮略是個消耗 CPU 的操作，如果訪問量比較大的站點，最好考慮使用程式生成縮圖到硬碟上，或者在前端加上 Cache快取或者使用 CDN。 **好了，今天就聊到這兒吧！小夥伴們可以在下方留言。別忘了給個在看和轉發，讓更多的人看到，一起學習一起進步！！** ## 寫在最後 > 如果你覺得冰河寫的還不錯，請微信搜尋並關注「 **冰河技術** 」微信公眾號，跟冰河學習高併發、分散式、微服務、大資料、網際網路和雲原生技術，「 **冰河技術** 」微信公眾號更新了大量技術專題，每一篇技術文章乾貨滿滿！不少讀者已經通過閱讀「 **冰河技術** 」微信公眾號文章，吊打面試官，成功跳槽到大廠；也有不少讀者實現了技術上的飛躍，成為公司的技術骨幹！如果你也想像他們一樣提升自己的能力，實現技術能力的飛躍，進大廠，升職加薪，那就關注「 **冰河技術** 」微信公眾號吧，每天更新超硬核技術乾貨，讓你對如何提升技術能力不再迷茫！ ![](https://img-blog.csdnimg.cn/20200709131720