【Nginx】面試官居然問我Nginx如何生成縮略圖，還好我看了這篇文章！！

寫在前面

今天想寫一篇使用Nginx如何生成縮略圖的文章，想了半天題目也沒想好，這個題目仍是一名讀者幫我起的。原由就是這位讀者最近出去面試，面試官正好問了一個Nginx如何生成縮略圖的問題。還別說，就是這麼巧呀！！就衝這標題，也要寫一篇乾貨滿滿的技術好文！！

關於Nginx的安裝，小夥伴們能夠參考《【Nginx】實現負載均衡、限流、緩存、黑白名單和灰度發佈，這是最全的一篇了！》

還有就是，我經過小程序開通了留言功能，小夥伴們若是對文章有什麼好的建議和意見，或者在閱讀文章時，有什麼疑問，均可以在留言區進行留言！！

生成縮略圖方案

爲了手機端瀏覽到與手機分辨率相匹配的圖片，提升 APP 訪問速度以及減小用戶的手機流量，須要將圖片生成縮略圖，這邊共有如下解決方案。

• A.發佈新聞生成多重縮略圖 – 沒法匹配到各類尺寸圖片
• B.當相應縮略圖不存在，則使用 PHP 或者 Java 等程序生成相應縮略圖 – 須要程序員協助
• C.使用 Nginx 自帶模塊生成縮略圖 – 運維便可完成
• D.使用 Nginx＋Lua 生成縮略圖

通過多方的考慮，決定使用方案 C，使用 Nginx 自帶模塊生成縮略圖。

Nginx生成縮略圖

配置Nginx

使用 Nginx 自帶模塊生成縮略圖，模塊： --with-http_image_filter_module，例如，咱們能夠使用以下參數安裝Nginx：

./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 塊中。

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;
}
複製代碼

訪問圖片

配置完成後，咱們就能夠使用相似以下的方式來訪問圖片。

www.binghe.com/123_100x10.…

當咱們在瀏覽器地址欄中輸入上面的連接時，Nginx會做出以下的邏輯處理。

• 首先判斷是否存在原圖 123.jpg,不存在直接返回 404（若是原圖都不存在，那就不必生成縮略圖了）
• 跳轉到 www.binghe.com/123.jpg?h=1… 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。

好了，今天就聊到這兒吧！小夥伴們能夠在下方留言。別忘了給個在看和轉發，讓更多的人看到，一塊兒學習一塊兒進步！！

寫在最後

若是你以爲冰河寫的還不錯，請微信搜索並關注「 冰河技術 」微信公衆號，跟冰河學習高併發、分佈式、微服務、大數據、互聯網和雲原生技術，「 冰河技術 」微信公衆號更新了大量技術專題，每一篇技術文章乾貨滿滿！很多讀者已經經過閱讀「 冰河技術 」微信公衆號文章，成功跳槽到大廠；也有很多讀者實現了技術上的飛躍，成爲公司的技術骨幹！若是你也想像他們同樣提高本身的能力，實現技術能力的飛躍，進大廠，升職加薪，那就關注「 冰河技術 」微信公衆號吧，天天更新超硬核技術乾貨，讓你對如何提高技術能力再也不迷茫！