您当前的位置:首页 > 电脑百科 > 站长技术 > 服务器

Nginx系列:图片过滤处理

时间:2020-08-30 11:48:49  来源:  作者:

http_image_filter_module是Nginx提供的集成图片处理模块,支持nginx-0.7.54以后的版本,在网站访问量不是很高;磁盘有限不想生成多余的图片文件的前提下,就可以用它实时缩放图片,旋转图片,验证图片有效性以及获取图片宽高以及图片类型信息,由于是实时计算的结果,所以网站访问量大的话,不建议使用。

安装还是很简单的,默认http_image_filter_module模块是不会编译进nginx的,所以要在configure时候指定编译http_image_filter_module模块。另外http_image_filter_module模块需要依赖gd-devel的支持,可以使用yum install gd-devel先安装,如果未安装会报“/configure: error: the HTTP image filter module requires the GD library.”错误。

Nginx图片处理的优缺点

  • 优点

(1)操作简单。通过简单配置,省去了后端裁剪程序的复杂性;

(2)实时裁剪。可以实时访问在线裁剪图片;

(3)灵活性强。后端程序裁剪图片时需要知道裁剪图片的尺寸和质量,使用nginx裁剪可以实时裁剪任意尺寸的图片;

(4)不占用硬盘空间;

  • 缺点

(1)消耗CPU和内存,访问量大的时候就会给服务器带来很大的负担。(可以通过使用Nginx缓存和缓存服务器来解决);

(2)功能不是很强大,支持的处理图片类型只包括JPEG、GIF、PNG or WebP;

 

0x01:安装http_image_filter_module

  • 先安装gd-devel依赖库
yum install gd-devel
Nginx系列:图片过滤处理

 

  • Nginx添加http_image_filter_module模块

先查看旧版本Nginx的configure参数

 /usr/local/nginx/sbin/nginx -V

 

Nginx系列:图片过滤处理

 

configure时添加http_image_filter_module模块

/configure --prefix=/usr/local/nginx --user=nginx 
--group=nginx --with-http_secure_link_module 
--with-http_stub_status_module  
--with-stream_ssl_preread_module  
--with-http_ssl_module  
--with-http_image_filter_module 

编译安装nginx

make 
cp ./objs/nginx /usr/local/nginx/sbin/

 

0x02:语法说明

  • image_filter
语法:    image_filter off;
image_filter test;
image_filter size;
image_filter rotate 90 | 180 | 270;
image_filter resize width height;
image_filter crop width height;
默认值:    —
上下文:    location

设置图像变换的操作:

off : 在所在location关闭模块处理。

test :确保应答是JPEG,GIF或PNG格式的图像。否则错误 415 (Unsupported Media Type) 将被返回。

size: 以json格式返回图像信息。例如:

{ "img" : { "width": 100, "height": 100, "type": "gif" } }

如果有错误发生,将会返回如下:

{}

rotate 90|180|270 : 将图像逆时针旋转指定角度。参数的值可以包含变量。可以单独使用,或与 resize 和 crop 变换同时使用.

resize width height: 按比例缩小图像至指定大小。如果想只指定其中一维,另一维可以指定为:“-”。如果有错误发生,服务器会返回 415 (Unsupported Media Type). 参数的值可以包含变量。当与 rotate 参数同时使用时, 旋转发生在缩放 之后。

crop width height : 按比例以图像的最短边为准对图像大小进行缩小,然后裁剪另一边多出来的部分。如果想只指定其中一维,另一维可以指定为:“-”。如果有错误发生,服务器会返回 415 (Unsupported Media Type). 参数的值可以包含变量。当与 rotate 参数同时使用时, 旋转发生在裁剪 之前。

  • image_filter_buffer
语法:    image_filter_buffer size;
默认值:    image_filter_buffer 1M;
上下文:    http, server, location

 

设置用来读图像的缓冲区的最大值。若图像超过这个大小,服务器会返回 415 (Unsupported Media Type).

  • image_filter_jpeg_quality
语法: image_filter_jpeg_quality quality;
默认值:    image_filter_jpeg_quality 75;
上下文:    http, server, location

设置变换后的JPEG图像的 质量 。可配置值:1 ~ 100 。更小的值意味着更差的图像质量以及更少需要传输的数据。推荐的最大值是95. 参数的值可以包含变量。

  • image_filter_sharpen
语法:    image_filter_sharpen percent;
默认值:    image_filter_sharpen 0;
上下文:    http, server, location

增加最终图像的锐度。锐度百分比可以超过100. 0为关闭锐化。参数的值可以包含变量。

  • image_filter_transparency
语法:    image_filter_transparency on|off;
默认值:    image_filter_transparency on;
上下文:    http, server, location

定义当对PNG,或者GIF图像进行颜色变换时是否需要保留透明度。损失透明度有可能可以获得更高的图像质量。PNG图像中的alpha通道的透明度默认会一直被保留。

image_filter off;  
#关闭模块  image_filter test;  #确保图片是jpeg gif png否则返415错误  image_filter size;  #输出有关图像的json格式:如下显示{ "img" : { "width": 100, "height": 100, "type": "gif" } } 出错显示:{}  
image_filter rotate 90|180|270;  
#旋转指定度数的图像,参数可以包括变量,单独或一起与resize crop一起使用。  
image_filter resize width height;  
#按比例减少图像到指定大小,如果减少一个可以另一个用"-"来表示,出错415,参数值可包含变量,可以与rotate一起使用,则两个一起生效。  image_filter crop width height;  
#按比例减少图像比较大的侧面积和另一侧多余的裁剪边缘,其它和rotate一样。没太理解  image_filter_buffer 10M;  #设置读取图像缓冲的最大大小,超过则415错误。  image_filter_interlace on;  #如果启用,最终的图像将被交错。对于JPEG,最终的图像将在“渐进式JPEG”格式。  image_filter_jpeg_quality 95;  #设置变换的JPEG图像的期望质量。可接受的值是从1到100的范围内。较小的值通常意味着既降低图像质量,减少传输数据,推荐的最大值为95。参数值可以包含变量。  image_filter_sharpen 100;  #增加了最终图像的清晰度。锐度百分比可以超过100。零值将禁用锐化。参数值可以包含变量。  image_filter_transparency on;  #定义是否应该透明转换的GIF图像或PNG图像与调色板中指定的颜色时,可以保留。透明度的损失将导致更好的图像质量。在PNG的Alpha通道总是保留透明度。

 

0x03:实战http_image_filter_module

在Nginx配置文件nginx.conf添加如下配置

  location ~* .(jpg|gif|png)$ {
            image_filter test;            root html;            # 图片默认宽度            set $width -;  
            # 图片默认高度            set $height -;  
            if ($arg_width != "") {
                set $width $arg_width;
            }            if ($arg_height != "") {
               set $height $arg_height;
            }            # 设置图片宽高            image_filter resize $width $height;              # 设置nginx读取图片最大buffer            image_filter_buffer 10M;  
            # 是否开启图片隔行扫描                        image_filter_interlace on;               error_page 404 = 400.html;
       }

配置完成后,在html目录新建image目录

Nginx系列:图片过滤处理

 

访问可以查看结果

http://127.0.0.1/image/3.jpg?height=100
http://127.0.0.1/image/3.jpg?width=130
http://127.0.0.1/image/3.jpg?width=100&height=200

 

0x04:附录

几个可能有用的规则

  • 匹配全站所有的结尾图片
 location ~* .(jpg|gif|png)$ {  
            image_filter resize 500 500;  
        }  

 

匹配某个目录所有图片
        location ~* /image/.*.(jpg|gif|png)$ {  
            image_filter resize 500 500;  
        }   
  • 使用url指定大小
   location ~* (.*.(jpg|gif|png))!(.*)!(.*)$ {  
            set $width      $3;  
            set $height     $4;  
            rewrite "(.*.(jpg|gif|png))(.*)$" $1;  
        }          location ~* /image/.*.(jpg|gif|png)$ {  
            image_filter resize $width $height;  
        }   

http://127.0.0.1/image/girl.jpg!300!200

自动将原图缩放为300*200的尺寸



Tags:Nginx   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  Tags: Nginx  点击:(7)  评论:(0)  加入收藏
前言Nginx是前后端开发工程师必须掌握的神器。该神器有很多使用场景,比如反向代理、负载均衡、动静分离、跨域等等。把 Nginx下载下来,打开conf文件夹的nginx.conf文件,Nginx服...【详细内容】
2021-12-08  Tags: Nginx  点击:(18)  评论:(0)  加入收藏
最近客户有个新需求,就是想查看网站的访问情况,由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的页...【详细内容】
2021-10-09  Tags: Nginx  点击:(48)  评论:(0)  加入收藏
安全服务器是只允许所需数量的服务器。理想情况下,我们将通过单独启用其他功能来基于最小系统构建服务器。进行最少的配置也有助于调试。如果该错误在最小系统中不可用,则分别...【详细内容】
2021-09-26  Tags: Nginx  点击:(60)  评论:(0)  加入收藏
在今年的NGINX Sprint 2.0虚拟大会上,NGINX(来自流行的开源web服务器/负载均衡器和反向代理背后的公司F5),发布了NGINX现代应用参考架构(MARA)。该公司在一篇博客文章中说,这将帮...【详细内容】
2021-09-26  Tags: Nginx  点击:(60)  评论:(0)  加入收藏
Ubuntu下安装Nginx一、系统基本信息查看1、查看Ubuntu版本信息:使用命令:cat /proc/version 查看~$ cat /proc/versionLinux version 4.15.0-106-generic (buildd@lcy01-amd6...【详细内容】
2021-09-16  Tags: Nginx  点击:(60)  评论:(0)  加入收藏
出于安全审查或者对于系统安全性的要求,都要求我们生产环境部署的系统需要做一定的权限控制。那么如何简单快速地部署满足安全要求的权限系统呢?其实可以通过nginx的相关功能...【详细内容】
2021-09-07  Tags: Nginx  点击:(69)  评论:(0)  加入收藏
什么是NginxNginx(engine x)是一个高性能的HTTP和反向代理服务器,具有内存少,高并发特点强。1、处理静态文件,索引文件以及自动检索打开文件描述符缓冲2、无缓冲的反向代理加速...【详细内容】
2021-09-02  Tags: Nginx  点击:(70)  评论:(0)  加入收藏
本文适用于 php7.4+NGINX环境,适用于运行 wordpress 环境一、更新服务器sudo apt update二、命令快捷缩写设置通过ssh登录服务器,在用户目录下执行以下命令sudo nano .bashrca...【详细内容】
2021-08-31  Tags: Nginx  点击:(87)  评论:(0)  加入收藏
一、nginx正向代理介绍及配置(需要在客户端配置代理服务器进行指定网站访问)#模块 ngx_http_proxy_module: http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy...【详细内容】
2021-08-16  Tags: Nginx  点击:(75)  评论:(0)  加入收藏
▌简易百科推荐
阿里云镜像源地址及安装网站地址https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b111kK44P更新源之前把之前的国外的镜像先备份一下 切换到yumcd...【详细内容】
2021-12-27  干程序那些事    Tags:CentOS7镜像   点击:(1)  评论:(0)  加入收藏
前言在实现TCP长连接功能中,客户端断线重连是一个很常见的问题,当我们使用netty实现断线重连时,是否考虑过如下几个问题: 如何监听到客户端和服务端连接断开 ? 如何实现断线后重...【详细内容】
2021-12-24  程序猿阿嘴  CSDN  Tags:Netty   点击:(12)  评论:(0)  加入收藏
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  有云转晴    Tags:chrome   点击:(7)  评论:(0)  加入收藏
一. HTTP gzip压缩,概述 request header中声明Accept-Encoding : gzip,告知服务器客户端接受gzip的数据 response body,同时加入以下header:Content-Encoding: gzip:表明bo...【详细内容】
2021-12-22  java乐园    Tags:gzip压缩   点击:(8)  评论:(0)  加入收藏
yum -y install gcc automake autoconf libtool makeadduser testpasswd testmkdir /tmp/exploitln -s /usr/bin/ping /tmp/exploit/targetexec 3< /tmp/exploit/targetls -...【详细内容】
2021-12-22  SofM    Tags:Centos7   点击:(7)  评论:(0)  加入收藏
Windows操作系统和Linux操作系统有何区别?Windows操作系统:需支付版权费用,(华为云已购买正版版权,在华为云购买云服务器的用户安装系统时无需额外付费),界面化的操作系统对用户使...【详细内容】
2021-12-21  卷毛琴姨    Tags:云服务器   点击:(6)  评论:(0)  加入收藏
参考资料:Hive3.1.2安装指南_厦大数据库实验室博客Hive学习(一) 安装 环境:CentOS 7 + Hadoop3.2 + Hive3.1 - 一个人、一座城 - 博客园1.安装hive1.1下载地址hive镜像路径 ht...【详细内容】
2021-12-20  zebra-08    Tags:Hive   点击:(9)  评论:(0)  加入收藏
以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过。1、设置复杂密码服务器设置大写、小写、特殊字符、数字...【详细内容】
2021-12-20  网安人    Tags:服务器   点击:(7)  评论:(0)  加入收藏
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  mdong    Tags:Nginx   点击:(7)  评论:(0)  加入收藏
转自: https://kermsite.com/p/wt-ssh/由于格式问题,部分链接、表格可能会失效,若失效请访问原文密码登录 以及 通过密钥实现免密码登录Dec 15, 2021阅读时长: 6 分钟简介Windo...【详细内容】
2021-12-17  LaLiLi    Tags:SSH连接   点击:(16)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条