首页 > 技术笔记 > Linux > 利用nginx实现实时缩略、裁剪功能
2015
12-12

利用nginx实现实时缩略、裁剪功能

在我们平时的开发中,例如在做wordpress模板时,很多时候要在文章列表中显示一张文章的图片,由于文章图片的大小并不是可控的,而页面的设计为了美观,可能图片的尺寸是一定的,这个时候如果放原图的话,可能就会导致图片被拉伸或压缩,本来很好看的模板,但是用在实际中并不是太美观。 最近我也在工作中遇到这样的问题,这个时候就想起了阿里云的图片处理功能,之前见过,阿里云的图片缩放裁剪具体的内容可以查看http://help.aliyun.com/document_detail/oss/oss-img-guide/crop/auto-crop.html

一、 功能

今天我们只是简单实现这个功能,形式是这样, 比如我的网站有这样一张图片:http://test.vimer.club/vim.gif ,我希望得到的结果是这样,当我访问http://test.vimer.club/vim.gif@330w_100h_75Q_c时我得到一张330*100像素质量为75的裁剪图片,当我访问http://test.vimer.club/vim.gif@330w_330h_75Q_r时我得到一张330*330像素质量为75的等比例缩放图片。

二、 原理

这里需要用到nginx的http_image_filter_module模块,这个模块可以很方便的实现缩略图功能,只是默认的情况下并不会安装,需要自己编译安装才能行。编译的时候./configure 增加 –with-http_image_filter_module 编译安装即可。具体http_image_filter_module的用法可以查看http://nginx.org/en/docs/http/ngx_http_image_filter_module.html  。

三、 初步实现:实时缩放裁剪

nginx配置: 功能是实现了,这样实现有其优点,首先根据传入的参数即可生成各种尺寸图片,并且还不占用硬盘空间。但是这样实现需要消耗CPU,访问量大的时候就会给服务器带来极大的负担。所以如果访问量很大的话,最好将缩略图保存在硬盘上,或者在前端加上cache或者使用CDN。

四、实时生成缩略图存放在硬盘上

nginx配置: 缩略图生成流程:
  1. 原图在http://test.vimer.club/vim.gif。我需要一份200×200的缩略图。
  2. 请求http://test.vimer.club/vim.gif@200w_200h_75Q_r
  3. 判断referer,看是否合法,不合法则直接返回404
  4. 判断是否已生成了该格式文件,若已生成,则直接rewrite到该图上
  5. 若不存在则转到http://test.vimer.club/image-resize/vim.gif?w=200&h=200&q=75
  6. 根据传入的参数对图片进行裁剪,并将裁剪后的文件存储为vim_200w_200h_75Q_r.gif
  7. 将图片返回
这样就将裁剪或缩放后的图片存在了本地,但是问题又来了,随着时间的推移,生成的这些图片可能会越来越多,并占据极大的磁盘空间,如果不及时清理,那么硬盘肯定会爆掉,所以我们要每隔一段时间对长时间不访问的图片进行清理。需要的时候还会生成,不用担心。

五、 定时清理磁盘

定时清理磁盘我们用linux的crontab定时任务来进行清理。命令可以使用: 这个命令会把符合命名规则的文件,且7天未进行过访问的图片清理掉。定时执行可配置crontab:  
最后编辑:
作者:射雕天龙
转载请注明:转载自射雕天龙的博客(http://blog.wangjunfeng.com)
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

利用nginx实现实时缩略、裁剪功能》有 3 条评论

  1. eeli 说:

    OH,GOOD BLOG.

  2. 深圳牙科医院 说:

    问,我怎么在里面修改404

    • 射雕天龙 说:

      1.更改nginx.conf在http定义区域加入:
      fastcgi_intercept_errors on;
      2.更改nginx.conf在server 区域加入:
      error_page 404 = /404.html
      3.检查nginx配置并reload

留下一个回复

你的email不会被公开。