nginx实现图片的缩放和裁剪

最近在做壁纸的项目,会要求根据原图生成不同的分辨率来适配手机。目前设计的方案是只保存一张原图,不同分辨率的图片在请求时根据原图动态裁剪,nginx层实现。

例:

原图url:http://s.qdcdn.com/cl/12526976.jpg

客户端请求的url:http://s.qdcdn.com/cl/12526976,240x400.jpg

则在请求时,服务器nginx层根据原图,动态裁剪出240x400分辨率的图片返回给客户端。

nginx层使用http_image_filter_module模块:

http_image_filter_module是nginx提供的集成图片处理模块,支持nginx-0.7.54以后的版本,在网站访问量不是很高磁盘有限不想生成多余的图片文件的前提下可,就可以用它实时缩放图片,旋转图片,验证图片有效性以及获取图片宽高以及图片类型信息,由于是即时计算的结果,所以网站访问量大的话,不建议使用。

我们的业务访问量也很大,但是用到了cdn,即访问顺序是cdn->nginx->图片服务器,cdn会回源访问nginx,nginx动态生成指定分辨率的图片后,下次用户再访问此分辨率图片时,cdn上已经有了缓存,会大大减少并发动态生成缩略图的访问量。

http_image_filter_module模块的安装请自行网上查阅,本文不再讲述。重点讲下http_image_filter_module生成缩略图的两个命令。

http_image_filter_module有以下6个命令,这里重点讲述resize命令和crop命令:

以下是这两个命令官方的解释(官方文档地址 http://nginx.org/en/docs/http/ngx_http_image_filter_module.html#image_filter):

这里我简单做下翻译:

resize - 根据设置按比例得减小图像。比如100*100的图片,而设置是50*25,减小后的图片为25*25。如果你只想设置一个维度,可以用“-”代替。出错时返回415。

crop - 根据设置按比例得减小图像,然后裁剪成跟设置一样大小的图片。比如100*100的图片,而设置是50*25,减小后的图片为50*50,Nginx会选取中间高度25的像素,形成50*25的图片,所以图片会有缺失。如果你只想设置一个维度,可以用“-”代替。出错时返回415。

大家应该看出了两个命令的区别:resize是会保持原图的纵横比去做缩放,不会做裁剪;crop是缩放的基础上按指定的分辨率去裁剪多余的部分。

可以简单的如下记忆:

resize -最小边缩小图片保持图片完整性

crop -最大边缩放图片后截取多余的部分

公司当前服务器使用的是resize命令,我此次的项目是需要在原图的基础上裁剪出壁纸的,所以我要使用的是crop命令。

nginx服务器配置:

原图地址 location配置图片服务器路径即可

缩略图的地址 用正则匹配yrl,拿到宽、高后在里面调用resize width height或crop width height即可

时间: 2024-11-05 16:00:27

nginx实现图片的缩放和裁剪的相关文章

对图片的缩放和裁剪

//1.缩放   - (UIImage *)zoomImage:(UIImage *)image toScale:(CGSize)reSize   {       //根据要显示的大小等比例算出缩放后的图片大小       NSLog(@"image=====w==%f\n--------image==%f\n\n",image.size.width,image.size.height);       ZoomInEqualPercent *ziep = [[ZoomInEqualPe

PHP图片缩放,裁剪和压缩

Google PageSpeed Insights可以对网页加载速度评分,并给出优化建议 简单来说,优化图片即使用合适尺寸的图片(缩放,裁剪),压缩图片 这里只介绍jpng和png两种图片格式 软件准备: imagemagick apt-get install imagemagick   jpegtran apt-get install libjpeg-turbo-progs   optipng apt-get install optipng pngquant apt-get install p

黄聪:C#图片处理封装类(裁剪、缩放、清晰度、加水印、生成缩略图)有示例(转)

C#图片处理示例(裁剪,缩放,清晰度,水印) 吴剑 2011-02-20 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 前言 需求源自项目中的一些应用,比如相册功能,通常用户上传相片后我们都会针对该相片再生成一张缩略图,用于其它页面上的列表显示.随便看一下,大部分网站基本都是将原图等比缩放来生成缩略图.但完美主义者会发现一些问题,比如显示排版时想让相片缩略图列表非常统一.整齐.和美观,比如要求每张缩略图大小固定为120 x 90且不拉伸变形怎么办?再

Android Bitmap 常见的几个操作:缩放,裁剪,旋转,偏移

Android Bitmap 相关操作 常见的几个操作:缩放,裁剪,旋转,偏移      很多操作需要 Matrix 来支持:Matrix 通过矩阵来处理位图,计算出各个像素点的位置,从而把bitmap显示出来. matrix里有一个3x3的矩阵,用于图像处理: MSCALE_X MSKEW_X MTRANS_X MSKEW_Y MSCALE_Y MTRANS_Y MPERSP_0 MPERSP_1 MPERSP_2 根据变量名能猜出具体的用途:缩放X 偏移X 平移X偏移Y 缩放Y 平移Y透视0

Android实现对图片的缩放、剪切、旋转、存储

Android实现对图片的缩放.剪切.旋转.存储 一.问题描述 在开发中,当我们需要的有一张大图片同时还需要一些小图片时,我们只需要通过代码对此图片进行不同比例的缩放即可,这样大大节约资源,减小了安装包的尺寸 .除缩放外,我们还经常对图片进行其他操作如裁剪.旋转.存储等. 这样我们可以编写对于图片进行处理的通用组件,方便开发.下面就分享一下对图片进行处理的组件BitmapUtil,案例界面: 二.技术点描述 1.通过BitmapFactory取得Bitmap Bitmap bm=BitmapFa

nginx搭建图片服务器

http_image_filter_module是nginx提供的集成图片处理模块,支持nginx-0.7.54以后的版本,在网站访问量不是很高磁盘有限不想生成多余的图片文件的前提下可,就可以用它实时缩放图片,旋转图片,验证图片有效性以及获取图片宽高以及图片类型信息,由于是即时计算的结果,所以网站访问量大的话,不建议使用. 安装nginx wget http://nginx.org/download/nginx-1.7.3.tar.gz 安装gd yum install gd-devel 安装p

使用Jcrop.js和jQuery.form.js,用ImageIO等进行头像上传缩放及裁剪

首先,Java代码里带一个获取ImageReader的Iterator /** * 从网上摘抄的. * 返回包含所有当前已注册 ImageReader 的 Iterator,这些 ImageReader 声称能够解码指定格式. * 参数:postFix - 包含非正式格式名称 .(例如 "jpeg" 或 "tiff")等 . * * @param postFix * 文件的后缀名 * @author 刘各欢 * @return */ public Iterator&

小程序图片选择区域/等屏裁剪实现方法

效果图 HTML代码 <view class="index_all_box"> <view class="imgCut_header"> <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view> <view class="imgCut_header_m" bindtap='clickUpImg'>点击上传

java处理图片--图片的缩放,旋转和马赛克化

这是我自己结合网上的一些资料封装的java图片处理类,支持图片的缩放,旋转,马赛克化.(转载请注明出处:http://blog.csdn.net/u012116457) 不多说,上代码: package deal; import java.awt.Color; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.geom.AffineTransform; impo