当前位置:首页 > 行业动态 > 正文

cdn裁剪的参数

CDN 裁剪参数通常包括裁剪模式(如等比例、指定宽高裁剪等)、目标宽度、目标高度、裁剪位置(如中心、左上角等)以及图片格式等,用于按需对图片进行裁剪处理。

CDN裁剪的参数

一、裁剪方式

1、普通裁剪(crop):按照指定的宽度、高度、起点坐标等参数,从原图中裁剪出相应大小的矩形区域,设置裁剪宽度为300像素,高度为200像素,起点横坐标为50,纵坐标为50,就会从原图的(50,50)位置开始,裁剪出一个300×200像素的矩形区域。

2、圆形裁剪(circle):以指定的圆心坐标和半径为基础,从原图中裁剪出一个圆形区域,圆心坐标设置为(100,100),半径为50像素,那么就会以(100,100)为圆心,裁剪出一个半径为50像素的圆形区域。

二、裁剪参数

1、裁剪宽度(w)

描述:指定裁剪区域的宽度,单位通常为像素(px)。

取值范围:一般为正整数,且宽×高不能超过CDN所支持的最大像素限制(如阿里云CDN要求宽×高不能超过16777216px)。

示例:若设置w=400,则表示裁剪区域的宽度为400像素。

2、裁剪高度(h)

描述:指定裁剪区域的高度,单位为像素(px)。

取值范围:正整数,且需与裁剪宽度共同满足宽×高的限制条件。

示例:设置h=300,即裁剪区域的高度为300像素。

cdn裁剪的参数

3、起点横坐标(x)

描述:定义裁剪区域左上角顶点在原图中的水平位置坐标,默认左上角为原点(0,0)。

取值范围:整数,其值取决于原图的宽度以及裁剪区域的宽度和位置需求。

示例:当x=100时,表示裁剪区域左上角顶点在原图中距离左侧边缘100像素的位置。

4、起点纵坐标(y)

描述:确定裁剪区域左上角顶点在原图中的垂直位置坐标,默认左上角为原点(0,0)。

取值范围:整数,取值依据原图高度以及裁剪区域的高度和位置而定。

cdn裁剪的参数

示例:若y=150,意味着裁剪区域左上角顶点在原图中距离顶部边缘150像素处。

5、裁剪原点位置(gravity)

描述:设置裁剪的原点位置,原点按照九宫格的形式分布,一共有九个位置可以设置,分别为每个九宫格的左上角顶点。

取值范围:具体的取值通常用特定的字符或数字来表示这九个位置,如“NorthWest”(西北,对应左上角)、“Center”(中心)等。

示例:设置gravity=“Center”,表示以原图的中心位置作为裁剪的原点。

6、质量参数(quality)

描述:用于调整裁剪后图片的质量,取值范围通常为1-100的整数,数值越大质量越高,但文件体积也可能越大。

cdn裁剪的参数

取值范围:1 100的整数。

示例:若设置quality=80,则表示在保证一定质量的前提下对图片进行优化处理。

三、示例表格

操作名称 参数 描述 取值范围 示例
crop w(裁剪宽度) 指定裁剪区域的宽度 正整数,且宽×高不超过限制 w=300
h(裁剪高度) 指定裁剪区域的高度 正整数,结合宽度满足限制 h=200
x(起点横坐标) 裁剪区域左上角顶点的水平位置坐标 整数 x=100
y(起点纵坐标) 裁剪区域左上角顶点的垂直位置坐标 整数 y=150
gravity(裁剪原点位置) 设置裁剪的原点位置(九宫格形式) 特定字符或数字表示的九宫格位置 gravity=”Center”
circle 无特定宽度、高度参数 以圆心坐标和半径裁剪圆形区域 圆心(100,100),半径50px
quality 无特定位置参数 调整裁剪后图片的质量 1 100的整数 quality=80

相关问题与解答

1、问题:如果我想裁剪一张图片的中心部分,应该如何设置裁剪参数?

解答:可以将裁剪原点位置(gravity)设置为“Center”,然后根据需要设置裁剪宽度(w)、裁剪高度(h)、起点横坐标(x)和起点纵坐标(y),由于原点在中心,起点横坐标(x)和起点纵坐标(y)的值可以通过原图宽度和高度的一半再减去裁剪宽度和高度的一半来计算得出,原图宽度为800像素,高度为600像素,想要裁剪宽度为200像素、高度为150像素的中心部分,那么x=(800-200)/2=300,y=(600-150)/2=225,同时设置gravity="Center",w=200,h=150。

2、问题:为什么有时候设置的裁剪参数无法正常裁剪图片?

解答:可能有以下原因导致裁剪参数无法正常裁剪图片:一是参数值超出了CDN所支持的范围,比如裁剪宽度和高度的乘积超过了最大像素限制;二是图片格式不支持裁剪操作,部分特殊格式的图片可能需要进行转换后才能裁剪;三是网络问题或CDN缓存导致参数未及时生效,可以尝试刷新页面或等待一段时间再次尝试。