您现在的位置: 首页 > 开发编程 > 编程杂谈 > 正文

Nginx image_filter图片动态缩略模块

作者:admin来源:网络浏览:时间:2018-03-29 22:34:38我要评论
分享到

   在实际业务开发过程中,我们常遇到这样的问题:一张1000X1000像素的PNG图片上传后需要按照不同的等比像素显示在不同平台上。例如在网上将这张原始图片按照600X600像素显示出来,在手机上按照400X400像素显示出来,在平板设备的图片列表页面上按照100X100像素进行显示。并且由于外部各种因素的变化,在不同设备上显示同一张图片的大小也在不停的变化。

    通常读者会怎样处理这样的业务功能呢?最直接最能够立即想到,也是处理方式最简单的办法,就是将图片按照原始大小传输到客户端,再由客户端 Html5代码、Android代码、Object-C代码等客户端编程语言进行图片处理。但是这样做的缺点 也是很明显的:1000X1000像素的PNG图片大小普遍在100KB~200KB之间,这会导致多张图片传输时占用巨大的服务器宽带资源。如果有100个用户同时请求图片资源,那么瞬时宽带达到100Mbps~200Mbps。

    当然,还有另外的处理方式可以显著节约宽带资源:当这个1000X1000像素的原始图片上传时,服务器端除了保存原图,还同时按照客户端当前的图片尺寸要求,分别生成600X600像素、400X400像素、100X100像素的缩略图一通保存到服务器端。当客户端需要使用同一张图片的不同像素文件时,调用不同的保存路径就行了。一张400X400像素的PNG图片大小普通为20KB~40KB,显然这比传输原始图片本身减轻了不少的网络宽带压力。当然这也做的问题还是很明显的:

  1. 如果要在图片文件完成上传时就生成固定大小的缩略图,那么这些缩略图的尺寸从开始就最好是固定的。很难想象当客户端图片要求为每张商品原图增加一张300X300像素的缩略图时,服务端开发人员能在很短的时间内完成目前以存放在服务端的20000000张商品原图的新尺寸缩略图的生成动作。

  2. 磁盘空间也是一个问题,正式系统的图片文件一般存放在分布式文件系统上,例如MFS分布式文件系统、Ceph分布式文件系统,又或者是类似淘宝的TFS分布式文件系统,当然采用块存储方案的图片服务器也是有的(例如EMC提供的大型盘阵系统)。他们的共同特点都是可以提供海量的文件存储空间(例如100TB)。但是技术团队的要求一定都是利用有限的空间尽可能的多存储数据。所以如果使用类似的方法,200KB的原始文件就可能需要400KB甚至更多的磁盘空间进行存储,这样显然是不太符合要求的。

     

     

如果你需要使用Nginx的动态缩略图模块,就需要重新编译安装Nginx,并在安装时指定。

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

 

现在我们来看看image_filter模块的主要语法:

  1. image_filter test:测试当前原始图片是否是JPEG、GIF或PNG图片,如果测试过程出现错误则返回415.

  2. image_filter rotate 90|180|270:这个语法可以让image_filter模块按照90°、180°、270°这3个角度旋转图片。

  3. image_filter size:以JSON格式输出图片宽度、高度、类型。

  4. image_filter resize [width][height]:在保持图片比例的前提下,根据给定的长宽生成缩略图。

  5. image_filter crop[width][height]:以其最大边缩放图片后截取多余的部分。

  6. image_filter_jpeg_quality:设置JPEG图片的压缩质量比例,例如设置为75,则表示JPEG图片的压缩质量比为75%。

  7. image_filter_buffer:单张原始图片最大大小,默认为1MB;如果原始图片超过这个值,则image_filter模块会报错。按照服务器端存储的图片大小,最好设置一个兼容性较好的值

以下是一段image_filter模块在Nginx配置文件中的设置信息:

 

#不区分大小进行正则表达式匹配

#只要满足以下表达式的请求路径,则进行图片动态缩略图的生成

location ~* /(.+)\.(jpg|gif|png|ioc|jpeg)_(\d+)_(\d+)s {

#将以上正则表达式第3个区域设置的数值传入变量“w”

set $w $3

#将以上正则表达式第4个区域设置的数值传入变量“h”

set $h $4

#将rewrite后的地址重新在当前的location标签执行,以便找到原始图片

rewrite /(.+)\.(jpg|gif|png|ioc|jpeg)_(\d+)_(\d+)$ /$1.$2 break;

#按照宽带w和高度h,将原始图片进行等比例缩放

image_filter resize $w $h;

#设置单张原始图片的最大值为10MB

image_filter_buffer 10M;

#设置图片所在的根目录

root /home/nodejs/BDK/public/upload/;

}

 

Nginx 配置文件的其他部分不会受到图片模块的影响,看一个图片url如下:

 

http://xxxxx.com/jojlnlk456xxxlml.png_800_800

 

ok,这样就可以了

相关热词搜索: