Nginx企业实战-图片的过滤压缩

清疚 2023-07-12 05:16 11阅读 0赞

不管一个系统或网站的大与小，都存在相应的图片处理，生成缩略图、为图片加水印等等，如果涉及到APP端，这个图片的处理需求变得更加重要了，因为在目前看来，客户端的屏幕大小不一，会导致以下问题：

1、图片过大导致APP加载图片速度慢；  
2、消耗用户过多流量。  
注意：若要实现图片的压缩和过滤，nginx必须编译了 `--with-http_image_filter_module=dynamic`模块，而此模块编译时需要`gd-devel`包，这个包下载地址：`https://centos.pkgs.org/7/centos-x86_64/gd-devel-2.0.35-26.el7.x86_64.rpm.html，`下载后 `yum install gd-devel-2.0.35-26.el7.x86_64.rpm -y`，注意版本不能错，用`yum list gd`可查看gd版本  
1.配置nginx服务器

nginx服务器的ip地址为172.25.1.1

[root@server1 modules]# vim /usr/local/nginx/conf/nginx.conf
    在首行添加下面一行内容
    load_module modules/ngx_http_image_filter_module.so;
    ......
    #编辑一个location
     57         location /download { 
     58            image_filter resize 150 100;			#重新调整图片的尺寸（像素）
     59         }
    ......

之后重新加载nginx：

[root@server1 download]# nginx -t
    nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
    nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
    [root@server1 download]# nginx -s reload

2.加入测试文件

[root@server1 conf]# cd /usr/local/nginx/html/download/
    [root@server1 download]# ls
    1.png

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDE3Njc3_size_16_color_FFFFFF_t_70]  
3.测试

使用客户端访问http://172.25.1.1/download/1.png：

可以看出图片很小为728kb，原图片的大小：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDE3Njc3_size_16_color_FFFFFF_t_70 1]

[root@server1 download]# du -sh 1.jpg 
    1M	1.png

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDE3Njc3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200307121651980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDE3Njc3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDE3Njc3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200307121736234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDE3Njc3,size_16,color_FFFFFF,t_70