Nginx國産縮略圖子產品 ngx_image_thumb

關于

特性

本nginx子產品主要功能是對請求的圖檔進行縮略/水印處理，支援文字水印和圖檔水印。支援自定義字型，文字大小，水印透明度，水印位置，判斷原圖是否是否大于指定尺寸才處理等等

1. 編譯方法

實驗環境:

[root@masterserver ~]# cat /etc/redhat-release 

CentOS release 6.6 (Final)

[root@masterserver ~]# uname -m

x86_64

[root@masterserver ~]# uname -a

Linux masterserver 2.6.32-504.el6.x86_64 #1 SMP Wed Oct 15 04:27:16 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux

[root@masterserver ~]# 

# 請確定已經安裝了gcc automake autoconf m4

[root@masterserver ~]# yum install gd-devel pcre-devel libcurl-devel

[root@masterserver ~]# cd /home/opuser/tools/

[root@masterserver tools]# wget https://github.com/3078825/nginx-image/archive/master.zip [root@masterserver tools]# ll master.zip 

-rw-r--r-- 1 root root 14306 Mar 15 17:00 master.zip

[root@masterserver tools]# 

[root@masterserver tools]# ll master.zip 

[root@masterserver tools]# unzip master.zip 

Archive:  master.zip

ff2a0177fdec59828a88e2a05f0adb2a432e89a4

   creating: ngx_image_thumb-master/

  inflating: ngx_image_thumb-master/.gitignore  

  inflating: ngx_image_thumb-master/README.md  

  inflating: ngx_image_thumb-master/README_EN.md  

  inflating: ngx_image_thumb-master/config  

  inflating: ngx_image_thumb-master/ngx_http_image_module.c  

[root@masterserver tools]# ll

total 852

-rw-r--r-- 1 root root  14540 Oct 16 02:37 epel-release-6-8.noarch.rpm

-rw-r--r-- 1 root root  14306 Mar 15 17:00 master.zip

-rw-r--r-- 1 root root 828607 Apr 21  2015 nginx-1.7.10.tar.gz

drwxr-xr-x 2 root root   4096 Sep 23  2014 ngx_image_thumb-master

[root@masterserver tools]#

#安裝nginx加入子產品ngx_image_thumb-master

[root@masterserver tools]# <b>tar xf nginx-1.7.10.tar.gz</b>

[root@masterserver tools]# <b>cd nginx-1.7.10</b>

[root@masterserver nginx-1.7.10]# ./configure --add-module=../ngx_image_thumb-master/

[root@masterserver nginx-1.7.10]# make &amp;&amp; make install

#修改nginx配置檔案

[root@masterserver nginx-1.7.10]# vim /usr/local/nginx/conf/nginx.conf

 location / {

     root   html;

     index  index.html index.htm;

    #添加以下配置

    image on;

   image_output on;

 }

#檢查配置檔案是否正确，然後啟動nginx

[root@masterserver nginx-1.7.10]# /usr/local/nginx/sbin/nginx -t

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok

nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

[root@masterserver nginx-1.7.10]# /usr/local/nginx/sbin/nginx

#子產品ngx_image_thumb-master參介紹

image on/off 是否開啟縮略圖功能,預設關閉

image_backend on/off 是否開啟鏡像服務，當開啟該功能時，請求目錄不存在的圖檔（判斷原圖），将自動從鏡像伺服器位址下載下傳原圖

image_backend_server 鏡像伺服器位址

image_output on/off 是否不生成圖檔而直接處理後輸出 預設off

image_jpeg_quality 75 生成JPEG圖檔的品質 預設值75

image_water on/off 是否開啟水印功能

image_water_type 0/1 水印類型 0:圖檔水印 1:文字水印

image_water_min 300 300 圖檔寬度 300 高度 300 的情況才添加水印

image_water_pos 0-9 水印位置 預設值9 0為随機位置,1為頂端居左,2為頂端居中,3為頂端居右,4為中部居左,5為中部居中,6為中部居右,7為底端居左,8為底端居中,9為底端居右

image_water_file 水印檔案(jpg/png/gif),絕對路徑或者相對路徑的水印圖檔

image_water_transparent 水印透明度,預設20

image_water_text 水印文字 "Power By Vampire"

image_water_font_size 水印大小 預設 5

image_water_font 文字水印字型檔案路徑

image_water_color 水印文字顔色,預設 #000000

#調用說明

這裡假設你的nginx 通路位址為 http://10.0.0.10/

并在nginx網站根目錄存在一個 pit.jpg 的圖檔

通過通路

<a href="http://s5.51cto.com/wyfs02/M00/7D/6B/wKiom1bn1HzjNOdwAAC_OYV5viU997.png" target="_blank"></a>

<a href="http://10.0.0.10/pit.jpg!c300x500.jpg" target="_blank">http://10.0.0.10/pit.jpg!c300x200.jpg</a>

<a href="http://s2.51cto.com/wyfs02/M00/7D/69/wKioL1bn1bHDSttlAADwD8KF01A829.png" target="_blank"></a>

其中 c 是生成圖檔縮略圖的參數， 300 是生成縮略圖的寬度 200 是生成縮略圖的高度

一共可以生成四種不同類型的縮略圖。

支援 jpeg / png / gif (Gif生成後變成靜态圖檔)

C 參數按請求寬高比例從圖檔高度 10% 處開始截取圖檔，然後縮放/放大到指定尺寸（ 圖檔縮略圖大小等于請求的寬高 ）

M 參數按請求寬高比例居中截圖圖檔，然後縮放/放大到指定尺寸（ 圖檔縮略圖大小等于請求的寬高 ）

T 參數按請求寬高比例按比例縮放/放大到指定尺寸（ 圖檔縮略圖大小可能小于請求的寬高 )

W 參數按請求寬高比例縮放/放大到指定尺寸，空白處填充白色背景顔色（ 圖檔縮略圖大小等于請求的寬高 ）

5. 調用舉例

<a href="http://10.0.0.10/pit.jpg!c300x300.jpg" target="_blank">http://10.0.0.10/pit.jpg!c300x300.jpg</a>

<a href="http://s4.51cto.com/wyfs02/M01/7D/69/wKioL1bn1iqgfx0UAAEg5wEJ0xM595.png" target="_blank"></a>

http://10.0.0.10/pit.jpg!t300x300.jpg

<a href="http://s1.51cto.com/wyfs02/M00/7D/6B/wKiom1bn1eXi3-rzAAC25stGi0w163.png" target="_blank"></a>

http://10.0.0.10/pit.jpg!m300x300.jpg

<a href="http://s2.51cto.com/wyfs02/M01/7D/69/wKioL1bn1qGi6OwbAAE0d77K8FQ716.png" target="_blank"></a>

http://10.0.0.10/pit.jpg!w300x300.jpg

<a href="http://s1.51cto.com/wyfs02/M02/7D/69/wKioL1bn1-GRxfQzAAEoZBDEjBM801.png" target="_blank"></a>

6. 最後

這款子產品的縮略圖是實時生成的，如果你的網站流量比較大，勢必會造成nginx伺服器負載過高，針對這個問題，你可以參考我們運維生存時間之前寫的幾篇文章，分别為存硬碟和redis. 《nginx實時生成縮略圖到硬碟上》《srcache_nginx+redis建構緩存系統》

參考文章

下一篇解決流量大造成nginx負載過高的問題

      本文轉自027ryan  51CTO部落格，原文連結：<b>http://blog.51cto.com/ucode/1751414</b>，如需轉載請自行聯系原作者