标签归档：图片压缩

利用Nginx的ngx_http_image_filter_module做实时的图片压缩缩略图

你还在用 ImageMagick 生成网站的上传图片缩略图吗？其实有更好的方法一部到位，简单有效。

现而今有非常多的云存储服务支持图片空间，并根据设定的规则来生成空间里面的图片缩略图了，例如 UpYun、Aliyun OSS 都支持。

但有时候我们会因为一些其他的考虑（例如：价格因素），选择本地文件存储上传文件，这个时候，我们如何实现图片缩略图呢？

其实 Nginx 内置了 ngx_http_image_filter_module 可以帮助你处理图片：

  • 缩放
  • 裁剪
  • 调整图片品质
  • 旋转
  • 锐化

我们常用的可能就是缩放和裁剪了，根据业务和设计需要，在合适的位置不同尺寸的缩略图。

安装

可能一些标准的 Nginx 安装包没有带这个 module 的，你需要使用 Nginx 官方的源安装，并额外安装 nginx-module-image-filter 这个包: 

curl -O http://nginx.org/keys/nginx_signing.key
sudo apt-key add nginx_signing.key
sudo bash -c 'echo "deb http://nginx.org/packages/ubuntu/ $(lsb_release -cs) nginx
deb-src http://nginx.org/packages/ubuntu/ $(lsb_release -cs) nginx" > /etc/apt/sources.list.d/nginx-stable.list' sudo apt-get update
sudo apt-get install -y nginx nginx-module-image-filter

也可以直接用做好的 安装脚本 

curl -sSL https://git.io/vVHhf | bash

场景

以 Ruby China 的场景为例，我设计了下面几种不同的缩略图版本:

版本名称 限定尺寸 (px) 缩略方式
large 1920 限定宽度，高度自适应
lg 192×192 固定宽度和高度
md 96×96 固定宽度和高度
sm 48×48 固定宽度和高度
xs 32×32 固定宽度和高度

配置 Nginx

假定我们的上传文件存放在 /var/www/homeland/public/uploads 里面。

下面是 Ruby China 这个缩略图规则的完整 Nginx 配置：

/etc/nginx/nginx.conf 

user nobody;
worker_processes auto;
pid /var/www/pids/nginx.pid;
daemon on;

# 载入 ngx_http_image_filter_module
load_module modules/ngx_http_image_filter_module.so;

http {
   # ... 省略
}

/etc/nginx/conf.d/ruby-china.conf 

proxy_cache_path /var/www/cache/uploads-thumb levels=1:2 keys_zone=uploads_thumb:10m max_size=50G; server { listen 80 default_server; listen 443 ssl http2; root /var/www/homeland/public; location /uploads { expires 7d; gzip_static on; add_header Cache-Control public; add_header X-Pownered "nginx_image_filter"; # HTTP Response Header 增加 proxy_cache 的命中状态，以便于以后调试，检查问题  add_header X-Cache-Status $upstream_cache_status; proxy_pass http://127.0.0.1/_img/uploads; # 将缩略图缓存在服务，避免每次请求都重新生成  proxy_cache uploads_thumb; # 当收到 HTTP Header Pragma: no-cache 的时候，忽略 proxy_cache  # 此配置能让浏览器强制刷新的时候，忽略 proxy_cache 重新生成缩略图  proxy_cache_bypass $http_pragma; # 由于 Upload 文件一般都没参数的，所以至今用 host + document_uri 作为  proxy_cache_key "$host$document_uri"; # 有效的文件，在服务器缓存 7 天  proxy_cache_valid 200 7d; proxy_cache_use_stale error timeout invalid_header updating; proxy_cache_revalidate on; # 处理 proxy 的 error  proxy_intercept_errors on; error_page 415 = /assets/415.png; error_page 404 = /assets/404.png;
  } # 原始图片  location /_img/uploads { alias /var/www/homeland/public/uploads/$filename; expires 7d;
  } # 缩略图  location ~* /_img/uploads/(.+)!(large|lg|md|sm|xs)$ { set $filename /uploads/$1; if (-f $filename) { break;
    } # 根据 URL 地址 ! 后面的图片版本来准备好需要的参数（宽度、高度、裁剪或缩放）  set $img_version $2; set $img_type resize; set $img_w -; set $img_h -; if ($img_version = 'large') { set $img_type resize; set $img_w 1920;
    } if ($img_version = 'lg') { set $img_type crop; set $img_w 192; set $img_h 192;
    } if ($img_version = 'md') { set $img_type crop; set $img_w 96; set $img_h 96;
    } if ($img_version = 'sm') { set $img_type crop; set $img_w 48; set $img_h 48;
    } if ($img_version = 'xs') { set $img_type crop; set $img_w 32; set $img_h 32;
    } rewrite ^ /_$img_type;
  } # 缩放图片的处理  location /_resize { alias /var/www/homeland/public$filename; image_filter resize $img_w $img_h; image_filter_jpeg_quality 95; image_filter_buffer 20M; image_filter_interlace on;
  } # 裁剪图片的处理  location /_crop { alias /var/www/homeland/public$filename; image_filter crop $img_w $img_h; image_filter_jpeg_quality 95; image_filter_buffer 20M; image_filter_interlace on;
  }
}

你可能会觉得上面为何写得这么绕啊！

没办法，Nginx 不支持在 if {} 这个 block 里面用 image_filter 函数，image_filter 的第一个参数 resize/crop 也不能用变量的方式传输，所以…

然后，重启 Nginx，就可以尝试了。

注意点

  • 由于开启了 proxy_cache 缩略图将会在服务器上以文件的形式存在，你需要确保每次上传新文件名尽可能的是唯一的（例如用时间，或文件内容 MD5 作为文件名，参考 CarrieWave 文件名设计）
  • 浏览器强制刷新，会发起 Pragma: no-cache 的 Request Header，Nginx 会忽略 proxy_cache 重新生成图片。

效果演示

扩展阅读

Linux上imagemagick对图片进行压缩,convert命令的压缩率还不错

Linux上imagemagick对图片进行压缩,convert命令的压缩率还不错

这里要使用到强大的图片处理工具：imagemagick，它可以对图片进行格式转换、大小压缩、增加水印等操作，而不需要去写第三方的程序，只需要写简单的SHELL脚本就可以完成图片压缩操作，我的操作环境是UBUNTU，在UBUNTU下面安装这个软件超级简单：

    sudo apt-get install imagemagick

centos安装：   yum -y install ImageMagick

 

    其它linux有对应的软件安装命令，以下有我写的两个脚本，分别对图片进行批量格式以及压缩操作：

    图片格式转换，这里的示例是将[bB][mM][pP](所有BMP文件)格式的文件，转换为占空间小的jpg文件：

    

[c-sharp] view plaincopy

  1. #!/bin/sh  
  2. for img in `find ./ -name “*.[bB][mM][pP]”`; do  
  3.         #change upper filename to lower  
  4.         _imglower=`echo $img|tr “[:upper:]” “[:lower:]”`;  
  5.         #get file’s basename  
  6.         _basename=`basename $_imglower .bmp`;  
  7.         #get file’s dir  
  8.         _dirname=`dirname $img`;  
  9.         #get desc filename with path  
  10.         _basefullname=$_dirname”/”$_basename”.jpg”;  
  11.         #do convert  
  12.         convert $img $_basefullname;  
  13.         #remove bmp file  
  14.         rm $img;  
  15.         echo “deal $_basefullname successfully”;  
  16. done  

 

    图片压缩脚本：

    

[c-sharp] view plaincopy

  1. for img in `find ./ -name “*.[jJ][pP][gG]”`; do  
  2.                 convert -quality 95% -resize 85%*85% $img $img-resized;  
  3.                 rm $img;  
  4.                 mv $img-resized $img  
  5.                 echo $img  
  6. done  
  7. for img in `find ./ -name “*.[pP][nN][gG]”`; do  
  8.                 convert -resize 85%*85% $img $img-resized;  
  9.                 rm $img;  
  10.                 mv $img-resized $img  
  11.                 echo $img  
  12. done  
  13. for img in `find ./ -name “*.[gG][iI][fF]”`; do  
  14.                 convert -resize 85%*85% $img $img-resized;  
  15.                 rm $img;  
  16.                 mv $img-resized $img  
  17.                 echo $img  
  18. done  

利用Nginx的ngx_http_image_filter_module做实时的图片压缩缩略图