Use nginx to dynamically convert image sizes to generate thumbnails

The Nginx ngx_http_image_filter_module module (nginx version 0.7.54+) can be used to dynamically convert image sizes in JPEG, GIF, PNG, and WebP formats.

This module is not built by default and needs to be enabled via the --with-http_image_filter_module configuration parameter.

If the image traffic is not large, you can use this module.

This module uses the libgd library. It is recommended to use the latest version of the library.

The following are the steps to add this module if nginx is already installed.

1 Installation Dependencies

yum -y install gd-devel
yum -y install libxslt-devel
yum -y install perl-devel perl-ExtUtils-Embed

2 View the original nginx parameters

​ nginx -V

The output is as follows:

​ nginx version: nginx/1.12.2
configure arguments:

Check whether there is --with-http_image_filter_module. If so, it means it has been installed. Otherwise, continue to install.

3 Compilation

When recompiling, you need to download the same version of nginx source code as the original one and decompress it.

Add --with-http_image_filter_module=dynamic and the original parameters (no need to execute the make install command to reinstall)

./configure --with-http_image_filter_module=dynamic
make

4 Back up the original nginx

cp -r /usr/local/nginx /usr/local/nginxbak

5 Covering nginx

cp objs/nginx /usr/local/nginx/sbin/
mkdir /usr/local/nginx/module
cp objs/ngx_http_image_filter_module.so /usr/local/nginx/module/ngx_http_image_filter_module.so

6 Modify the configuration file

vim /usr/local/nginx/conf/nginx.conf

load_module /usr/local/nginx/module/ngx_http_image_filter_module.so;
location ~* /images/(.+)_(\d+)x(\d+)\.(jpg|jpeg|gif|png)$ {
        set $w $2;
        set $h $3;
        image_filter resize $w $h;
        image_filter_buffer 30M; #Set the maximum size of the image buffer. If the size exceeds the set value, the server will return error 415
        image_filter_interlace on;
        image_filter_jpeg_quality 80;
        try_files /$1.$4 /notfound.jpg;
        expires 1d;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        alias /home/publisherupload/ ; #root enables access to /User/XX/Desktop/images when accessing the /images/ path. If root is replaced with alias, /User/XX/Desktop/ is accessed; /User/XX/Desktop/ is the absolute path on the local machine.
    }

location /images {
  alias /home/publisherupload/ ; #root enables access to /User/XX/Desktop/images when accessing the /images/ path. If root is replaced with alias, /User/XX/Desktop/ is accessed; /User/XX/Desktop/ is the absolute path on the local machine.
  autoindex on; #Open directory browsing function}

7 Reload nginx configuration

/usr/local/nginx/sbin/nginx -s

8 Testing

The final image access address is to add the _width x height parameter after the original image address

http://110.87.103.58:12345/images/2021-01/202101250944272_500x400.png

refer to

https://cloud.tencent.com/developer/article/1644466

This is the end of this article about using nginx to dynamically convert image sizes to generate thumbnails. For more information about nginx dynamically converting image sizes, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!