[Nginx] Use Nginx's image_filter_module to process pictures

Our app for different sizes of mobile phones need to show different sizes of pictures, at the same time, in the app's different function modules, the size of the picture display is also different. However, at the beginning of the tour line upload, the picture only has a suitable size for the site, so this leads to the following problems: 1, the picture is too large to cause the app load picture speed slow; 2, consumes too much traffic; Therefore, for the server image processing solution is imminent. The Image_filter_module in Nginx provides a feasible method for the above scenario, which is described in detail in this paper.
One, the idea: 1,app request the picture, and provides the picture size information, Nginx intercepts the request, processing and caches the picture, 2, when the app requests the same picture next time, Nginx directly takes the picture of the cache to return to the app.
Second, nginx picture processing flow chart




Three, Nginx image_filter_module configuration deployment Instructions:
Nginx_http_image_filter_module is only available after Nginx 0.7.54, which is used to convert JPEG, GIF, and PNG pictures. This module is not compiled by default, so add the relevant configuration information when compiling the Nginx source code.
-----------Compilation and Installation-- Download Nginx Latest Version$ Curl http://nginx.org/download/nginx-1.8.0.tar.gz |TAR-XZF- Add nginx configuration information$./configure--user=web--group=web-prefix=/home/web/nginx--with-http_stub_status_module--without-http-cache-- With-http_ssl_module--with- Http_image_filter_module Make . $ make && make install
Open Nginx Service$/home/web/nginx/sbin/nginx
The above four steps to download the latest Nginx source code, and extract to the appropriate folder, and then enter the folder, add configuration information with./configure (the user in the configuration setting this nginx is the Web, the installation directory is/home/web/nginx), compiling the source code with make. Finally open the Nginx service, if there is no error, opened the browser, input HTTP://IP can see the following information




——————————— configuration-------------The most basic definition of nginx functionality from/home/web/nginx/conf/nginx.conf This file we have here in nginx.conf contains "Site_ enabled/"This folder and create a default file under Site_enabled to configure the functionality of the server, attach important configuration information directly below, and give comments

# matches the URI that satisfies the following regular expression. If matched, enter the functional segment location ~* "^ (/static/upload/images)/([\d-]+)/(. *) \.                      (Jpe?g|png) _ (\d+) x (\d+) $ "{#" extracts the arguments in the regular expression, assigns the meaningful variable set $dir $;                   #以日期命名的文件夹 set $width $;                   #图片的宽 set $height $;      #图片的高 set $dimens "_$5x$6";  #图片纬度信息 set $reImage _name "$3$dimens.$4";                   #给图片重命名 xxx_w*h.jpg set $image _name "$3.$4"; # Picture Original name # redefine the picture Uri, because the location of the picture is inconsistent with the access URI, historical issues alias/data/nginx/resize_images/$dir/$reImage _name; # define Image_uri set $image _uri image_resize/$dir/$image _name?width= $width &height= $height;         # to determine if the image visited exists         # if not present, Proxy_pass to location/image_resize for image processing &N Bsp       if  (!-f  $request _filename)  {            proxy_pass& nbsp;http://127.0.0.1:82/$image _uri;             break;        }                # If Proxy_pass is executed, the following four sentences are to save the processed pictures to Prepare future visit         proxy_store         /data/nginx/resize_images/$dir/$reImage _name;         proxy_store_access   user:rw  group:rw  all:r;         proxy_temp_path     /data/images;         proxy_set_header     Host  $host;                 #访问日志路径         access_log    LOGS/S Tore.access.log;    } # matches the URI that satisfies/image_resize, all from above location location/image_resize {#access_log logs/image_resize.log;                          #重定义 access URI alias/data/alidata4/files_opt/static/upload/images/;             # According to the parameters, resize found the picture image_filter resize $arg _width $arg _height;                         Image_filter_jpeg_quality 75;             # Prohibit access to the extranet, allowing only local access to allow 127.0.0.0/8;     Deny all; }

Reference: 1, compile nginx from source code Introductory Introduction to 2,nginx configuration 3, how to control Nginx 4,nginx How HTTP requests are processed 5,nginx's Proxy_module (Agent module) 6,nginx's Image_filter_module