nginx实现本地图片生成缩略图

时间：2023-03-08 15:55:05

　　nginx可以实现图片的缩略图效果，很多网站为了前端静态资源相应的性能会给大图自动生成一个小图，比如我们经常会在网上看到bd_64x64.png这种格式，淘宝上的小图经常会看到xxx.jpg_100x100xz.jpg这种格式，也是缩略图的应用；接下来在nginx中实现缩略图效果

　　首先查看nginx在安装时开启了哪些模块，使用 ./nginx -V 可以查看模块开启情况，更准确的说是将安装nginx时编译阶段执行的 ./configure 命令的原样输出，如果编译的时候添加了 --with-http_image_filter_module 那么表示nginx就能直接支持图片缩略图，另外编译之前要提前安装gd-devel这个库，如果没安装可以使用rpm或者yum在线安装的方式 yum -y install gd-devel 进行安装，安装之后再在原有参数上添加上面的参数编译安装nginx即可开启模块

　　假设我们图片的真实路径是在本地/image_data/xxxx.jpg，下面有很多jpg格式的图片，我们希望通过访问/image_data/xxxx_100x100.jpg这样的请求路径可以生成宽为100，高也为100的小图，并且请求的宽和高是可变的，那么这时候需要在nginx模块中拦截该请求并返回转换后的小图，在对应的server {}段中进行配置，配置如下：

        location ~* /image_data/(.*)_(\d+)x(\d+)\.jpg$ {

            root /;

            set $s $;

            set $w $;

            set $h $;

            image_filter resize $w $h;

            image_filter_buffer 10M;

            rewrite ^/image_data/(.*)$ /image_data/$s.jpg break;

        }

　　过程就是获取请求参数，然后进行相应缩小，最终重写到对应的文件即可实现；另外上述image_filter_buffer设置图片占用buffer的最大大小，默认为1M，当图片大小大于该配置时，那么就会出现415的错误，所以要修改为合适的大小

　　修改完上面配置之后，执行 ./nginx -s reload 即可生效，这时访问图片就可以实现小图了

　　需要注意一点，上面宽和高的设置并不是把图片强制转换成指定长和宽的大小，而是有其中一个变量最大等于设置的大小并且按比例缩小，比如设置为100x100，对于1000x600的图片来说，缩小后是宽最大为100，高最大也是100，并且等比例缩小；假设高为100，那么宽为1000/6 = 166.67 > 100不符合要求，假设宽为100，那么高为600/10 = 60 < 100符合要求，所以最终缩小后的图片应该是100x60的，并且保持比例不变形，这个地方要了解

　　如果想产生长和宽都是100的正方形图片怎么办呢，现在就在 image_filter resize $w $h; 下面加一行： image_filter crop $w $h; 即可，这个表示对图片裁剪并成比例扩大至相应的长度，即图片内容可能会丢失，但是图片比例仍然不变，所以只加resize还是两个都加要根据具体需要来配置

　　另外还可以对图片进行旋转，配置如下：

        location ~* /image_data/(.*)_(\d+)x(\d+)_(\d+)\.jpg$ {

            root /;

            set $s $;

            set $w $;

            set $h $;

            set $r $;

            image_filter resize $w $h;

            image_filter crop $w $h;

            image_filter rotate $r;

            image_filter_buffer 10M;

            rewrite ^/image_data/(.*)$ /image_data/$s.jpg break;

        }

　　上面在图片后面又加了一个参数表示旋转度数，比如/image_data/xxx_100x100_90.jpg就可以把图片逆时针旋转90度，具体是用image_filter rotate来实现的，旋转度数只能是90的整数倍，旋转方向是逆时针，并且只有90,180,270是有效的，其余数字全部是显示正的，如果不旋转一般用0或者360就可以了

　　以上就是nginx image_filter模块，缩放，裁剪，旋转图片的简单应用

相关文章