NGINX安装并使用缩略图插件

vlambda
2022-04-29

NGINX安装并使用缩略图插件

为了适应手机分辨率的差异、以及减少网络带宽的占用，我们需要把原图进行一定的缩放以降低图片大小；常用的方法有如下几种：

1.nginx根据原图实时动态生成（支持动态尺寸缩略图、纯动态、不多占磁盘空间）

2.nginx根据原图实时动态生成并保存缩略图（支持动态尺寸缩略图、半动态）

3.应用程序在处理原图的时候就直接根据预先设定好的尺寸生成一些缩略图

关于图片的处理，实际上就是在网络带宽、计算资源、存储资源三者之间做取舍和平衡；根据实际需要和业务发展取舍即可；这里主要列出第二种的操作步骤，第一种与第二种相似，第三种可以任意实现（有现成的缩略图生成util方法，或者找第三方包也行）。

nginx根据原图实时动态生成并保存缩略图

1、nginx安装ngx_image_thumb-master插件

1.查看当前nginx版本并进入nginx的安装目录

查看nginx版本：

/home/tengine/nginx/sbin/nginx -v

查询安装目录：

find / -name nginx-1.13.8

进入安装目录：

cd /home/tengine/src/nginx-1.13.8

2.下载需要的第三模块ngx_image_thumb-master并解压

下载命令：

wget https://github.com/3078825/nginx-image/archive/master.zip

解压命令：unzip master.zip

NGINX安装并使用缩略图插件

3.查看已编译参数（查看已经安装的nginx模块）

命令：/home/tengine/nginx/sbin/nginx -V

NGINX安装并使用缩略图插件

4.执行重新编译(在上一步查询出来的已编译参数后面加上需要增加的模块即可)

命令：./configure --prefix=/home/tengine/nginx --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module --with-http_stub_status_module --add-module=/home/fastdfs/fastdfs-nginx-module-master/src --add-module=ngx_image_thumb-master

如果发现报错，则说明缺少对应的依赖包或工具，需要安装缺少的包；如下

NGINX安装并使用缩略图插件

4.1.安装缺少的包（有时候会遇到版本匹配问题，因此可以用星号、不是必须精准匹配）

命令：yum -y install gd-devel*

4.2.安装完成后，继续执行编译命令，结果如下

NGINX安装并使用缩略图插件

5.编译完成后，执行make操作

命令：make

PS：这里只需要make,一定不要执行make install，不然会覆盖

NGINX安装并使用缩略图插件

……

NGINX安装并使用缩略图插件

6.进入nginx目录，备份原nginx文件

命令：cp nginx nginx.20201210.bak

NGINX安装并使用缩略图插件

7.替换nginx二进制文件

把nginx复制到sbin目录：cp /home/tengine/src/nginx-1.13.8/objs/nginx /home/tengine/nginx/sbin/nginx

此操作可能会报错文件繁忙，这时候需要先关闭nginx，然后重新覆盖，再重新启动；如下：

关闭nginx进程：

ps -ef|grep nginx

kill -9 11150

kill -9 11151

替换nginx二进制文件：

cp /home/tengine/src/nginx-1.13.8/objs/nginx /home/tengine/nginx/sbin/nginx

启动nginx：./nginx

NGINX安装并使用缩略图插件

2、修改nginx配置并启用

1.备份原来的nginx文件（直接改名字即可）

命令：

cp nginx.conf nginx.conf.20201210.bak

NGINX安装并使用缩略图插件

2.修改nginx.conf文件内容，增加启用缩略图的配置（可以使用vi，也可以根据习惯下载下来添加上传）；需要添加的内容如下

#配置图片缩略图，匹配图片后缀

location ~* /group1/M00/.*\.(gif|jpg|jpeg|png)$ {

root /opt/fastdfs_storage_data/data;

image on;

image_output off;

image_jpeg_quality 75;

image_backend off;

}

#正常fdfs配置（原来是什么这里就是什么，此处只是测试环境的配置demo）

location ~/group1/M00 {

root /opt/fastdfs_storage_data/data;

ngx_fastdfs_module;

valid_referers none blocked *.whty.com.cn whty.com.cn *.tyjulink.com tyjulink.com servicewechat.com;

if ($invalid_referer) {

return 403;

}

目的：如果是图片后缀结尾就使用缩略图模块进行图片处理，不是图片文件再匹配使用ngx_fastdfs_module模块处理文件

NGINX安装并使用缩略图插件

3.因为nginx自动生成的缩略图文件是根据root + location 定位的目标图片路径，因此需要建立软连接（根据实际使用的存储软件来决定即可；下面是结合我们使用的fastdfs配置）

创建目录：mkdir -p /opt/fastdfs_storage_data/data/group1/M00

建立软连接：ln -s /opt/fastdfs_storage_data/data/* /opt/fastdfs_storage_data/data/group1/M00

NGINX安装并使用缩略图插件

4.重启nginx

cd /home/tengine/nginx/sbin

./nginx -s reload

NGINX安装并使用缩略图插件

5.检验结果

访问图片文件（都能正常访问即可）：

1.访问原图：https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.jpg

2.缩略图：https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.jpg!t200x200.jpg

https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.t200x200.jpg

https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740_t200x200.jpg

https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM7400t200x200.jpg

https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.jpg!t200x200.png

3.访问文件：https://域名/group1/M00/03/DE/Cggo919pTvKAfG1uAALkXHMXVwg07.xlsx

验证前截图：

NGINX安装并使用缩略图插件

验证后截图：

说明：

支持jpeg png gif(gif生成后变成静态图片)

c参数按请求宽高比例从图片高度10%处开始截取图片，然后缩放到指定尺寸（https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.jpg!c200x200.jpg）

m参数按请求宽高比例从图片中截取图片，然后缩放到指定尺寸（https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.jpg!m200x200.jpg）

t参数按请求宽高比例缩放到指定尺寸（https://域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.jpg!t200x200.jpg）

w参数按请求宽高比例缩放到指定尺寸，空白处填充白背景颜色（https:/域名/group1/M00/03/DE/Cggo919oadKAITy7AAo4kBoWuMM740.jpg!w200x200.jpg）

但是Cggo919oadKAITy7AAo4kBoWuMM740.jpg!t200x200.jpg与Cggo919oadKAITy7AAo4kBoWuMM740_t200x200.jpg的写法存在一个功能上的差异；就是可以生成Cggo919oadKAITy7AAo4kBoWuMM740.jpg!t200x200.png但是不能生成Cggo919oadKAITy7AAo4kBoWuMM740_t200x200.png