Module configuration tutorial for generating thumbnails in Nginx server

2020-05-10 23:29:45
OfStack

The ngx_image_thumb module generates thumbnails

ngx_image_thumb is a module used in nginx to generate thumbnail images. There are many ways to live thumbnail images. The main function of nginx module is to thumbnail/watermarking the requested image, which supports text watermarking and image watermarking. Support custom font, text size, watermark transparency, watermark location, judge whether the original image is larger than the specified size before processing, etc.
1. Compilation method
Make sure you have the libcurl-dev libgd2-dev libpcre-dev dependent library installed on your system before compiling
1.1 examples of Debian/Ubuntu systems


#  If you don't have it installed GCC The relevant environment needs to be implemented 
$ sudo apt-get install build-essential m4 autoconf automake make
$ sudo apt-get install libgd2-noxpm-dev libcurl4-openssl-dev libpcre3-dev

1.2 CentOS /RedHat / Fedora


#  Please make sure it is installed gcc automake autoconf m4
$ sudo yum install gd-devel pcre-devel libcurl-devel

1.3 FreeBSD / NetBSD / OpenBSD
Without further further, install libcurl-dev libgd2-dev libpcre-dev yourself with port
Make sure you have gcc automake autoconf m4 installed before compiling
1.4 Windows
# also supports it, but too much code has to be changed, including Nginx itself, which is compiled with VC++
You can compile with cygwin for the trouble. I don't think you should do that. Use the Unix/Linux operating system.
2. nginx/tengine installation
Nginx or Tengine, as you can see, choose 1 for both
2.1 download Tengine


 # wget http://tengine.taobao.org/download/tengine-1.4.5.tar.gz
 # tar -zxvf tengine-1.4.5.tar.gz
 # cd tengine-1.4.5

2.2 download Nginx


# wget http://nginx.org/download/nginx-1.4.0.tar.gz
 # tar -zxvf nginx-1.4.0.tar.gz
 # cd nginx-1.4.0

2.3 installation module


 # wget https://github.com/3078825/nginx-image/archive/master.zip
 # unzip master.zip
 # ./configure --add-module=./nginx-image-master
 # make
 # make install

Configuration of 3.


location / {
 root html;
 # Add the following configuration 
 image on;
 image_output on;
 }

Parameters of 4.

Whether image on/off turns thumbnail on or off by default Whether image_backend on/off is enabled or not, when this function is enabled, request the image that does not exist in the directory (judge the original image), the original image will be automatically downloaded from the mirror server address image_backend_server mirror server address Whether image_output on/off outputs off by default after processing directly without generating images image_jpeg_quality 75 generates a quality default value of 75 for JPEG images Whether image_water on/off is watermarking enabled image_water_type 0/1 watermark type 0: image watermark 1: text watermark image_water_min 300 300 image width 300 height 300 case to add watermark The default value of image_water_pos 0-9 watermark position is 9, 0 is the random position,1 is the top left,2 is the top center,3 is the top right,4 is the middle,5 is the middle,6 is the middle,7 is the bottom left,8 is the bottom center, and 9 is the bottom right image_water_file watermark file (jpg/png/gif), absolute path or relative path watermark image image_water_transparent watermark transparency, default 20 image_water_text watermark text "Power By Vampire" image_water_font_size watermark size defaults to 5 image_water_font text watermark font file path image_water_color watermark text color, default #000000

4.1 call description

Here assume that your nginx access address is http://127.0.0.1/
There is also a picture of test.jpg in the root directory of nginx website
By visiting
http: / / 127.0.0.1 test jpg! c300x200. jpg will generate/output test. 300 x200 jpg thumbnails
Where c is the parameter to generate the image thumbnail, and 300 is the width to generate the thumbnail and 200 is the height to generate the thumbnail
1 can generate 4 different types of thumbnails.
Support for jpeg/png/gif (Gif becomes a static image when generated)
The C parameter captures the image from 10% of the height of the image, and then scales/enlarges to the specified size (the image thumbnail size is equal to the requested width and height).
The M parameter is centered in the screenshot according to the requested width and height ratio, and then it is scaled/enlarged to the specified size (the thumbnail size of the image is equal to the requested width and height).
The T parameter scales/enlarges to the specified size according to the requested width and height (the image thumbnail size may be smaller than the requested width and height)
The W parameter is scaled/enlarged to the specified size according to the requested width and height, and the white background color is filled in the blank (the size of the image thumbnail is equal to the requested width and height).
5. Call the example


http://127.0.0.1/test.jpg!c300x300.jpg
http://127.0.0.1/test.jpg!t300x300.jpg
http://127.0.0.1/test.jpg!m300x300.jpg
http://127.0.0.1/test.jpg!w300x300.jpg
http://127.0.0.1/test.c300x300.jpg
http://127.0.0.1/test.t300x300.jpg
http://127.0.0.1/test.m300x300.jpg
http://127.0.0.1/test.w300x300.jpg

nginx generates thumbnails in real time to the hard drive
Now with the emergence of the terminal (such as mobile phone, ipad tablet), as well as a variety of terminal mobile phone resolution and size is different, now mobile phone user traffic is treasure, online generated thumbnail appear all sorts of function of architecture, use php real-time generate thumbnails, useful also nginx + lua, I also speak to use above nginx generated thumbnail, but every time the user access is need to generate one, will bring cpu and hard disk larger pressure, brought another 1 way today, This time use nginx to generate thumbnails from the original image to the hard disk. See my configuration
1. Set up the cache directory first


# mkdir /data/site_cache/

2. Modify the nginx configuration


 location ~* ^/resize {
  root /data/site_cache/$server_name;
  set $width 150;
  set $height 100;
  set $dimens "";
 
  if ($uri ~* "^/resize_(\d+)x(\d+)/(.*)" ) {
   set $width $1;
   set $height $2;
   set $image_path $3;
   set $demins "_$1x$2";
  }
 
  if ($uri ~* "^/resize/(.*)" ) {
   set $image_path $1;
  }
 
  set $image_uri image_resize/$image_path?width=$width&height=$height;
 
  if (!-f $request_filename) {
   proxy_pass http://127.0.0.1/$image_uri;
   break;
  }
  proxy_store /data/site_cache/$server_name/resize$demins/$image_path;
  proxy_store_access user:rw group:rw all:r;
  proxy_set_header Host $host;
  expires 30d;
  access_log off;
 }
 
 location /image_resize {
  alias /data/site/$server_name/;
  image_filter resize $arg_width $arg_height;
  image_filter_jpeg_quality 75;
  access_log off;
 }

The process of generating thumbnails is as follows:
(1), the original image in www. ofstack. com image / 1. jpg. I need a thumbnail of 100x100.
(2), request www. ofstack. com/resize_100x100 / image / 1. jpg.
(3) this request enters location ~* ^/resize, and then determines whether this image exists in the directory image_path. If so, it is directly put back to the user.
(4), there is no so jump to / / www ofstack. com/image_resize image / 1. jpg & # 63; width = 100 & height = 100;
(5) location /image_resize performs the thumbnail function according to the incoming width and height, and sets the image quality to 75
(6), then generates the file to/data/site_cache/www ofstack. com/resize_100x100 image / 1. jpg
(7) and return the picture to the user
(8) the function of nginx to generate thumbnails to the hard disk ends here