关于网站缩略图的几种技术实施方案

网站缩略图对于很多程序员来讲都是绕不开的一个环节。细心的网友应该知道在此之前波波专门分享了一个关于图片智能裁切的接口，其实这个接口的基础原理是基于OpenCV的图像识别，设计这个接口的初衷也是在一个项目中对用户上传的图片进行自动裁切而不需要像很多网站那样由用户自己拖动裁切组件进行裁切。

每个人接触的知识总是不断增加的，所以本篇文章波波也将几种常用的网站缩略图实施技术进行简单的分析和总结下。

第一种：多规格裁切与存储。

这种缩略图处理方式应该是很早之前的了。比如某开源论坛程序就在用户上传图片时分别裁切成了不同的规格图片存放在服务器上，非常浪费服务器的资源。目前基本上已经弃用了，只有部分网站可能还会保存1~2种不同规格的图片。

第二种：图片自适应。

这种方式是通过<img>标签让同一张图片按照不同场景中定义的规格显示。目前很多网站用的基本上都是这种方式。这种方式的优势就是处理简单，基本上不需要处理。节省服务器存储资源。但是缺点也很明显，就是缩略图本身作为小图显示，如果原图过大，那么用户端加载速度会异常缓慢，影响用户体验。

第三种：服务器自处理技术。

今天分享的重点就是这种，我们打开淘宝网站进行分析经常会发现类似这样的效果。

这种方式其原图是用户上传的单张图片，但是服务器会根据使用场景。自动按照需要的规格把处理后的图片返回前端。在这里我们主要用到的就是nginx的image filter。

参考配置：

server {
listen 80;
server_name 127.0.0.1;
charset utf-8;
root /www/uploadfile;
#拦截所有带“！”号的图片请求
location ~* ^(.*\.(?:jpg|gif|png|jpeg|bmp))!(.*){
#rewrite ^(.*\.(?:jpg|gif|png))! $1;
#图片访问路径
set $filename $1;
#图片压缩尺寸
set $img_arg $2;
#拆解处理尺寸参数，参数性质如200x400样式
if ($img_arg ~ "^(\d+)x(\d+)") {
set $img_width $1;
set $img_height $2;
}
if ($img_arg ~ "^(\d+)$") {
set $img_width $1;
set $img_height "-";
}
if ($img_arg ~ "^x(\d+)") {
set $img_width "-";
set $img_height $1;
}
if ( $img_width = "" ){
set $img_width 100;
}
if ( $img_height = ""){
set $img_height 100;
}
#使用内部跳转，将尺寸参数传递
echo_exec /_imgFilt;
}
#图片处理
location /_imgFilt {
alias /www/uploadfile$filename;
image_filter resize $img_width $img_height;
image_filter_buffer 10M;
}
location ~ .*\.(swf|docx|doc|xls|xlsx|txt|pdf|ppt|pptx|mp3|zip|rar|tar|gz|mp4|ttf|ttc|fmap|fmi|theme)$ {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
expires 30d;
}
}