nginx图片处理
前言
不管一个系统或网站的大与小,都存在相应的图片处理,生成缩略图、为图片加水印等等,如果涉及到APP端,这个图片的处理需求变得更加重要了,因为在目前看来,客户端的屏幕大小不一,会导致以下问题:
1、图片过大导致APP加载图片速度慢;
2、消耗用户过多流量。
思路
1、APP请求图片,并提供需要图片的尺寸信息,nginx经过拦截后,处理并缓存图片。
2、当app下次请求同样的图片时,nginx直接取缓存中的图片返回给APP(这个暂不深究)。
nginx图片处理流程图
具体实现步骤:
1、nginx_http_image_filter_module在nginx 0.7.54以后才出现的,用于对JPEG, GIF和PNG图片进行转换处理这个模块默认不被编译,所以要在编译nginx源码的时候,加入相关配置信息(略)
2、ngx_http_image_filter_module指令(nginx官网)
location /img/ {
proxy_pass http://backend;
image_filter resize 150 100;
image_filter rotate 90;
error_page 415 = /empty;
}
location = /empty {
empty_gif;
}
3、http_image_filter_module指令的配置本地nginx
location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
set $w $3;
set $h $4;
rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
image_filter resize $w $h;
}
4、运行结果:
(1)
(2)疑问:这两张图片看上去,怎么看也不是一个正方形?
解答:http_image_filter_module模块的image_filter 指令决定了,语法: image_filter (test | size | resize width height | crop width height),这里用到了 resize width height;resize:就是根据设置按比例得到图片;
疑问:怎么才能得到设置的真实的大小,比如100x100,就得到一张100x100的图片?
解答:进行剪裁,用到的是 crop width height
5、配置
location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {
set $w $3;
set $h $4;
rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
image_filter resize $w $h;
image_filter crop $w $h;
}
6、运行结果:
(1)(2)
7、到此就已经实现了生成缩略图的配置了,如果还需要其他的操作,比如,将图片旋转,就是用rotate就可以了,其他就不做过多的描述。
8、配置
location ~* (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)$ {
set $w $3;
set $h $4;
set $rotate $5;
rewrite (.*\.(jpg|gif|png))!(.*)!(.*)!(.*)!(.*)$ $1 break;
image_filter resize $w $h;
image_filter crop $w $h;
image_filter rotate $rotate;
}
最新文章
- linux环境下安装mysql数据库遇到的问题
- ahjesus 获取当前方法被调用执行的具体位置,包括命名空间和方法
- 类的扩展--类目和延展--ios
- IOS刷新数据
- Spring启动时加载数据
- 【转】改善C#程序的建议2:C#中dynamic的正确用法 空间
- android视图切换动画:ViewAnimator类及其子类
- CodeForces 621A Wet Shark and Odd and Even
- 十大滤波算法程序大全(Arduino精编无错版)(转)
- week01-绪论
- pl/sql学习(6): 引号/程序调试/列中的字符串合并/正则表达式
- visual studio 中被遗忘的任务列表和书签
- oracle数据库创建用户
- 【 HDU2966 】In case of failure(KD-Tree)
- Tcp Udp发送包的大小限制问题
- postgresql修改数据库编码
- js 判断是否可以打开本地软件
- Android调用相机拍照并返回路径和调用系统图库选择图片
- 【机器学习】Apriori算法——原理及代码实现(Python版)
- Hive编程指南
热门文章
- 如何安装虚拟机VMware
- 在Azure上实现Linux Server故障转移
- 浏览器对于常见HTTP状态码的反应
- sublime 插件
- iOS 2D绘图 (Quartz2D)之Transform(CTM,Translate,Rotate,scale)
- iOS 2D绘图 (Quartz2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)
- CSS背景图像位置属性background-position百分比详解
- .net Core学习笔记:Windows环境搭建
- ionic路由传值
- 一个仿windows泡泡屏保的实现