故事背景:
为了让物理像素密度更高的iphone6s等手机享受高清图片定制(同时普通手机对图片的质量可以降低),我们需要一个图片服务器来实现以下的功能:
<blockquote>
我想,做的好的公司,都会有这么一个图片服务器,通过url获取参数,然后可以控制图片质量,也可以将图片裁剪成不同的尺寸。
所以我们只需上传大图(@2x),其余小图都交给图片服务器处理,我们只要负责拼接url即可。
</blockquote>
如,这样一张原图:
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg
可以类似这样,进行图片裁剪:
200×200
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX_200x200.jpg
100×100
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX_100x100.jpg
查阅之后发现nginx本身可以搞定。
http_image_filter的作用就是在路由这一步,由nginx帮你对图片进行处理,包括裁减啊缩放啊这样的功能。返回一张处理过的图片。
这里跳过编译的步骤(我的nginx是由运维搭建的编译进去了这个模块),高版本的nginx可以动态加载该模块。
下面开始粘贴nginx中的相关配置:
location ~ \/testImage\/(\d+)\.(jpg)$ {
set $h $arg_h;
set $w $arg_w;
#image_filter crop $h $w;
image_filter resize $h $w;
}
location ~ \/testImage\/(\d+)_(\d+)x(\d+)\.(jpg)$ {
if ( -e $document_root/testFile/testImage/$1.$4 ) {
rewrite '/(\d+)_(\d+)x(\d+)\.(jpg)$' /testFile/testImage/$1.$4?h=$2&w=$3 last;
}
return 404;
}
location ~* \.(jpg)$ {
}
location的匹配规则和rewrite写法请参考这里。
以上写法本身参考自这里。
需要强调的是其中判断文件是否存在与rewrite让我写了好半天,希望你可以深入理解跳过这个坑。
另外毕竟是cpu帮我们生成了新图,并没有将它保存下来。所以访问量大的时候是一种消耗。有文章介绍结合Fastdfs一起可以解决这个问题。