Nginx Domestic thumbnail module ngx_image_thumb

About

nginx Span style= "font-size:14px;font-family: ' Song body ', SimSun;" >nginx generate thumbnail configuration-Ttlsa Tutorial series of Nginx

Characteristics

The main function of the Nginx module is to request the image of the thumbnail/watermark processing, support text watermark and image watermark. Support custom fonts, text size, watermark transparency, watermark location, determine if the original image is larger than the specified size before processing, etc.

1. Compilation method

Lab Environment:

[Email protected] ~]# cat/etc/redhat-release

CentOS Release 6.6 (Final)

[Email protected] ~]# uname-m

x86_64

[Email protected] ~]# uname-a

Linux masterserver 2.6.32-504.el6.x86_64 #1 SMP Wed Oct 04:27:16 UTC x86_64 x86_64 x86_64 gnu/linux

[Email protected] ~]#

# Make sure the GCC automake autoconf M4 is installed

[Email protected] ~]# yum install gd-devel pcre-devel libcurl-devel

[Email protected] ~]# cd/home/opuser/tools/

[Email protected] tools]# wget https://github.com/3078825/nginx-image/archive/master.zip [email protected ] tools]# ll Master.zip

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

[Email protected] tools]#

[email protected] tools]# ll Master.zip

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

[Email protected] 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

[email protected] tools]# LL

Total 852

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

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

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

Drwxr-xr-x 2 root root 4096 Sep Ngx_image_thumb-master

[Email protected] tools]#

#安装nginx加入模块Ngx_image_thumb-master

[Email protected] tools]# tar xf nginx-1.7.10.tar.gz

[email protected] tools]# cd nginx-1.7.10

[Email protected] nginx-1.7.10]# /configure--add-module=. /ngx_image_thumb-master/

[[email protected] nginx-1.7.10]# make && make install

#修改nginx配置文件

[Email protected] nginx-1.7.10]# vim/usr/local/nginx/conf/nginx.conf

Location/{

root HTML;

Index index.html index.htm;

#添加以下配置

Image on;

Image_output on;

}

#检查配置文件是否正确, and then start the Nginx

[Email protected] 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

[Email protected] nginx-1.7.10]#/usr/local/nginx/sbin/nginx

#模块ngx_image_thumb-master Ginseng Introduction

Image on/off turn on thumbnail function, default off

Image_backend on/Off whether the mirror service is turned on, when the function is turned on, the request directory does not exist image (judging the original), will automatically download the original image from the mirror server address

Image_backend_server Mirror server address

Image_output on/off does not generate picture and direct processing after output default off

Image_jpeg_quality 75 generate a quality default value for a JPEG picture 75

Image_water on/off whether to turn on watermark function

Image_water_type 0/1 Watermark Type 0: Image watermark 1: Text watermark

Image_water_min 300 300 Picture width 300 height 300 to add a watermark

Image_water_pos 0-9 Watermark Position Default value 9 0 for the random position, 1 for the top left, 2 for the top center, 3 for the top right, 4 for the middle, 5 for the middle, 6 for the middle, 7 for the bottom, 8 for the bottom, and 9 for the bottom right.

Watermark image of Image_water_file watermark file (jpg/png/gif), absolute path or relative path

image_water_transparent watermark Transparency, default 20

Image_water_text watermark Text "Power by Vampire"

image_water_font_size Watermark Size Default 5

Image_water_font text watermark font file path

Image_water_color watermark text color, default #000000

#调用说明

This assumes that your nginx access address is http://10.0.0.10/

And in the Nginx site root directory There is a pit.jpg picture

By accessing

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7D/6B/wKiom1bn1HzjNOdwAAC_OYV5viU997.png "title=" Ori.png "alt=" Wkiom1bn1hzjnodwaac_oyv5viu997.png "/>

Http://10.0.0.10/pit.jpg!c300x200.jpg

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7D/69/wKioL1bn1bHDSttlAADwD8KF01A829.png "title=" 300x200.png "alt=" Wkiol1bn1bhdsttlaadwd8kf01a829.png "/>

Where c is the parameter that produces the picture thumbnail, 300 is the width of the generated thumbnail 200 is the height of the generated thumbnail

There are four different types of thumbnails that can be generated altogether.

Support for Jpeg/png/gif (GIF becomes a static image after generation)

The C parameter intercepts the picture from the height of the picture at the request aspect ratio of 10%, and then zooms/zooms to the specified size (the picture thumbnail size equals the requested width height)

The M parameter centers the picture at the requested aspect ratio and then zooms/zooms to the specified size (the picture thumbnail size equals the requested width)

The T parameter scales/zooms in proportionally to the specified size (the image thumbnail size may be less than the requested width) by the request aspect ratio

The W parameter scales/zooms to the specified size at the request aspect, fills the white background color in white space (picture thumbnail size equals the requested width)

5. Invocation examples

Http://10.0.0.10/pit.jpg!c300x300.jpg

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7D/69/wKioL1bn1iqgfx0UAAEg5wEJ0xM595.png "title=" C300x300.png "alt=" Wkiol1bn1iqgfx0uaaeg5wej0xm595.png "/>

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

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7D/6B/wKiom1bn1eXi3-rzAAC25stGi0w163.png "title=" T300x300.png "alt=" Wkiom1bn1exi3-rzaac25stgi0w163.png "/>

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

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7D/69/wKioL1bn1qGi6OwbAAE0d77K8FQ716.png "title=" M300x300.png "alt=" Wkiol1bn1qgi6owbaae0d77k8fq716.png "/>

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

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7D/69/wKioL1bn1-GRxfQzAAEoZBDEjBM801.png "title=" W300x300.png "alt=" Wkiol1bn1-grxfqzaaeozbdejbm801.png "/>

6. Finally

The thumbnail of this module is generated in real-time, if your site traffic is large, will inevitably cause the Nginx server load is too high, for this problem, you can refer to our operational survival time before writing a few articles, respectively, storage hard disk and Redis. "Nginx real-time thumbnail image to hard disk" "Srcache_nginx+redis Build Cache System"

Reference articles

Project Address: https://github.com/3078825/nginx-image/  

The next article solves the problem that the high load of nginx is caused by the traffic

This article from "Flat Light is true" blog, please be sure to keep this source http://ucode.blog.51cto.com/10837891/1751414

Nginx Domestic thumbnail module ngx_image_thumb