Build a most simple image processing server

Since the launch of qiniu, we have been using the service of qiniu cloud storage. We are always curious about the image processing. We just need to add parameters to the access link of the image to get the cropped or processed image according to the defined function.
For the implementation mechanism, it can not be said that there is no concept at all, but it has never seriously considered or tried to implement it. So it’s just an ordinary user who uses it as a zoom tool. Recently, I just saw an image processing service implemented by nginx and libgb. I feel that it’s very easy to build. After a decisive attempt, I really got a very practical skill or tool.

Operation principle and mechanism

If we don’t realize the core program of web server and image processing by ourselves, only for the purpose of using function, image processing function is more about technology selection and operation and maintenance. After defining the routing rules of resource access and the syntax of calling image processing, the simple operation principle should include the following steps:

1. The web server forwards the resource request to the registered application server or calls the local program
2. According to the routing rules and the design of the application, the application server (such as PHP) locates to the corresponding image binary file;
   3. According to the route or other HTTP header information, parse the image to be parsed
3. The application server implements it by itself, or calls other image processing libraries, or calls other programs (such as ImageMagick) to process the binary files and get the processed images
4. According to the HTTP protocol, the picture will be returned to the requested client.

It’s very interesting to design and implement the encapsulation of ImageMagick and Gd, or try to write the program to deal with pictures. You should find the opportunity to do it yourself.

Solutions

Recently, I happened to see a solution that uses the nginx module image filter provided by nginx, the extension module of nginx, to provide the most basic image clipping server. After a brief understanding, I immediately start to use docker to build the nginx image processing server.

Install nginx and open the image filter module

This example uses CentOS to install nginx. To use the image filter module, you need to install GD first. In fact, Gd is a real program for processing pictures. Use Yum to install < code > Yum install – y GD devel < / code >.
After referring to the official documents of nginx, we know that the module image filter will not be compiled into the installation package by default, so we need to manually install it, download the nginx source code, unzip it, enter the directory and execute < code >. / configure — prefix = / usr / local / nginx — with HTTP_ image_ filter_ Module < / code >, and then make to compile.
< code > curl http://localhost : 8080 / < / code >, check whether the installation is successful.
The following is the complete dockerfile file. In order to improve the download speed, the CentOS image provided by speed cloud is used.

FROM  index.tenxcloud.com/tenxcloud/docker -centos
#FROM centos
RUN yum install -y gd-devel wget
&& yum -y install gcc gcc-c++ kernel-devel make
&& wget  http://nginx.org/download/nginx-1.11.7.tar.gz
&& tar -xzvf nginx-1.11.7. tar.gz
&& wget  ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.39.tar.gz
&& tar -xzvf pcre-8.39. tar.gz
&& cd nginx-1.11.7
&& ./configure --prefix=/usr/local/nginx --with-http_ image_ filter_ module --with-pcre=../pcre-8.39
&& make
&& make install
ENV PATH /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/local/nginx/sbin
WORKDIR /var/www
EXPOSE 80 443
CMD [\"nginx\", \"-g\", \"daemon off;\"]

Nginx configuration, enable image filter

After installing nginx, you can directly set the rules of image filter to use the image processing function.

location /img/ {
proxy_ pass    http://backend;
image_ filter resize 150 100;
image_ filter rotate 90;
error_ page   415 = /empty;
}
location = /empty {
empty_ gif;
}

By setting < code > proxy_ Pass < / code >, we need to cut the image on a website, just set the proxy to point to the website.
image_ Filter size 150 100; < / code > is to re size the image.
image_ Filter off; < / code > configuration can turn off image filter.
By combining with the parsing rules of nginx, we can dynamically determine the size of the image to be scaled according to the URL link parameters.

location ~* (.*.(jpg|gif|png))!/w/(.*)/h/(.*)$ {
set $width   $3;
set $height  $4;
rewrite \"(.*.(jpg|gif|png))(.*)$\" $1;
}
location ~* /static/.*.(jpg|gif|png)$ {
proxy_ pass               http://www.liuwill.com;
image_ filter resize $width $height;
}

After the configuration is completed, call < code > nginx – s reload < / code > to load the new configuration file, and then enter the link < code > http://localhost/static/image_ url.png/w/100/h/100 < / code >, to see the effect.
For details, please refer to the official document of image filter provided by nginx.
< blockquote > GitHub address: https://github.com/liuwill-projects/docker-nginx-img

Please indicate：Free Editor Online Photoshop » Build a most simple image processing server