Configure the image filter module in Nginx to dynamically generate thumbnails

  • 2020-05-10 23:27:42
  • OfStack

So let's look at 1 and see what the image filter module of nginx is.

HttpImageFilterModule is used to crop oversized images to the specified size. nginx comes with its own module, which is not enabled by default
Turning on HttpImageFilterModule takes the parameter with-http_image_filter_module when compiling

This module mainly has two instructions:
Syntax: image_filter (test | size | resize width height | crop width height)
The default is: none
Context that can appear: location

This instruction specifies the conversion form of the image:

test - tests whether the reply is JPEG, GIF, or PNG images (other formats such as BMP are not supported), and returns 415 in case of an error.
size - returns the JSON data of the image, e.g. :("Img": ("width": 100, "height": 100, "type": "gif"))
resize - scale down the image according to the Settings, such as 100*100 image, and set it to 50*25, and the reduced image to 25*25. If you only want to set 1 dimension, you can use "-" instead. Error returns 415.
crop - scale down the image according to the Settings, and then crop it to the same size. For example, if the image is 100*100, and the setting is 50*25, the reduced image will be 50*50. Nginx will select the pixels with a height of 25 in the middle to form a 50*25 image, so the image will be missing. If you only want to set 1 dimension, you can use "-" instead. Error returns 415.

Syntax: image_filter_buffer size
Default: image_filter_buffer 1M
Available locations: http, server, location

This directive sets the maximum value of the single image cache. If the size of the filtered image exceeds the cache size, an error is reported and 415 is returned.

Key points to start with:

With the above knowledge and the cooperation of locaiont, if and image_filter, nginx can dynamically generate thumbnails.

Assume your image is in /img

How to access thumbnails
//www.ofstack.com/img/9GUMJR7200AJ0003_90x90.jpg
Access to the original image
//www.ofstack.com/img/9GUMJR7200AJ0003_90x0.jpg
//www.ofstack.com/img/9GUMJR7200AJ0003_0x50.jpg
//www.ofstack.com/img/9GUMJR7200AJ0003_0x0.jpg
//www.ofstack.com/img/9GUMJR7200AJ0003.jpg

Add the following configuration to the server context


    location ~* /img/(.+)_(d+)x(d+).(jpg|gif|png)$ {      
      set $h $2;
      set $w $3;
      if ($h = "0") {
        rewrite /img/(.+)_(d+)x(d+).(jpg|gif|png)$ /img/$1.$4 last;
      }
      if ($w = "0") {
        rewrite /img/(.+)_(d+)x(d+).(jpg|gif|png)$ /img/$1.$4 last;
      }

      # Generate thumbnails based on the given length and width 
      image_filter resize $h $w;
      # The original largest 2M , the image to be cropped over 2M return 415 Error, need to adjust parameters image_filter_buffer 
      image_filter_buffer 2M;             
      
      #error_page 415       /img/notfound.jpg;
      try_files /img/$1.$4 /img/notfound.jpg; 
    }

    location ~* /img {
      
    }

Generating thumbnails is just one of the functions of image_filter. It supports four parameters in total:
      test: returns whether it is really an image
      size: return image size and length
      corp: capture part 1 of the image
      resize: zoom images


location ~ ^/test/(.*)$ {
      image_filter size;
      root  /var/www/_xxx;
      index index.html index.htm;
    }

The output information is similar to:


{ "img" : { "width": 1024, "height": 537, "type": "jpeg" } }

Is it 1 JSON with 1 stress test, or very awesome with 500 concurrent, CPU occupies about 17%.


Related articles: