Nginx 使用 http_image_filter_module 实现图片缩放旋转

 原创    2023-08-05

本文介绍了在 Nginx 中使用 ngx_http_image_filter_module 模块来处理简单的图片转换,可以轻松实现图片缩放、旋转等操作。

本站使用的是独立的文件服务器,在需要显示大图片微缩图的场景中,之前都是事先用程序将图片切割好,然后通过完全不同的 URL 返回给前端显示。这种方式复杂且笨拙,本文介绍在 Nginx 中使用 ngx_http_image_filter_module 模块来处理简单的图片转换,可以轻松实现图片缩放、旋转等操作。

服务器环境 ubuntu。

一、确认 Nginx 已集成 http_image_filter_module

在终端中执行:

nginx -V

检查打印信息中是否存在 --with-http_image_filter_module,有的话则说明 Nginx 已集成了该模块,可以继续;否则需要自行编译安装。

二、Nginx 配置

nginx.conf 根节点添加 load_module 命令加载动态库,动态库的位置在不同系统中可能不一样。

load_module /usr/share/nginx/modules/ngx_http_image_filter_module.so;

在对应的 Nginx server 中添加对图片文件的处理:

location ~* \.(jpg|jpeg|webp|png|gif)$ {
	...
    set $img_width "-";
    if ($arg_resize_w ~* "^[0-9]+$") {
        set $img_width $arg_resize_w;
    }

    image_filter resize $img_width -;
    image_filter_buffer 10M;
    image_filter_jpeg_quality 95;
    image_filter_webp_quality 95;
    image_filter_transparency on;
    image_filter_interlace on;
}

以上配置生效后,请求图片资源时携带 resize_w 参数即可返回指定宽度,高度等比例缩放的图片。

下面是同一个图片资源返回的宽度为150和300像素图片的示例:

迎接暴风雨的向日葵

迎接暴风雨的向日葵

三、http_image_filter_module 参数含义

image_filter

可能的取值有:

  • off:禁用处理。
  • resize width height:缩放,保持一个纬度的原始大小应指定为“-”。
  • rotate 90|180|270:指定逆时针旋转图像的度数。

image_filter_buffer

读取图像缓冲区的最大大小。当超过时将返回 415 状态码。

image_filter_jpeg_quality

JPEG 格式图片质量,最大推荐值为 95。

image_filter_webp_quality

webp 格式图片质量。

image_filter_transparency

用指定的颜色转换 GIF 图像或 PNG 图像时是否应保持透明度。

image_filter_interlace

启用后图像呈现的是渐进式加载,即图片显示从模糊到清晰。这种效果用户体验更好,但更消耗服务资源。

参考官方文档说明:Module http-image-filter-module

四、使用 CDN 缓存

以上配置仅仅完成了 Nginx 图片实时缩放功能,但要部署到线上还是要考虑下性能。最优的方案是当请求图片缩放后将处理后的图片保存在本地,下次再次请求同样大小的图片时直接返回即可。

在我最初的设想中,Nginx 应该可以很方便的实现我的需求,但实际调研发现仅依赖 Nginx 实现 image_filter 缩放后的图片缓存比较麻烦,甚至无从下手。

因此,那就保持 Nginx 单纯的图片处理能力,再在 Nginx 之上加一层 CDN 缓存,达到和云服务商 OSS 存储服务中图片缩放处理等类似的效果。

相关文章:

近期服务器的一些改进
启用 Web 应用防火墙(WAF)
使用 Filebeat 和 Elasticsearch 分析 Nginx 日志
优化 Nginx 配置提升网站性能
Nginx 目录服务和反向代理的 web 鉴权认证

发表留言

您的电子邮箱地址不会被公开,必填项已用*标注。发布的留言可能不会立即公开展示,请耐心等待审核通过。