更新时间:2023-05-23 13:55:47
CDN Pro 的图片处理服务是基于开源软件 wsrv.vl 开发完成,并将其部署到边缘云容器上。wsrv.nl具备丰富的图像处理功能,更多详细的技术细节以及使用案例可参阅wsvr.nl官网文档库。
这一页列出了您可以在CDN Pro的图片处理应用上使用的全部功能参数,并为您提供了参数使用示例。您可自行选择需要使用的图片处理功能进行参数转换与配置。支持传递一个或者多个参数处理图片。
功能类别 | 功能点 | 参数 | 说明 |
---|---|---|---|
尺寸(Size) | 宽度 | w | 设置图像的宽度,以像素为单位。 |
高度 | h | 设置图像的高度,以像素为单位。 | |
设备像素比 | dpr | 设置图像的设备像素比率。 | |
适配(Fit) | 尺寸适配 | fit | 设置图像如何适应其容器。包括:内部、外部、覆盖、填充、包含等。 |
背景色 | cbg | 使用&fit=contain 设置图像包含于容器时,设置背景颜色。 | |
不放大 | we | 不对图像进行放大。 | |
裁剪(Crop) | 位置对齐 | a | 设置图像的对齐方式。包括:基于位置对齐、基于焦点对齐、智能裁剪等。 |
矩形裁剪 | crop | 将图像裁剪为特定尺寸。 | |
预调整裁剪 | precrop | 预调整裁剪。 | |
修剪 | trim | 修剪图片边缘的“无聊”像素。 | |
遮罩(Mask) | 遮罩类型 | mask | 从预置的形状列表中选择设置遮罩类型。 |
遮罩修剪 | mtrim | 从遮罩中删除掉多余的白色空白区域。 | |
遮罩背景 | mbg | 设置遮罩的背景颜色。 | |
方向(Orientation) | 垂直翻转 | flip | 围绕 Y 轴垂直翻转图像。 |
水平翻转 | flop | 围绕 X 轴水平翻转图像。 | |
旋转 | ro | 指定角度旋转图像。 | |
调整(Adjustment) | 旋转背景色 | rbg | 设置旋转任意角度时的背景颜色。 |
背景色 | bg | 设置图像的背景颜色。 | |
模糊虚化 | blur | 为图像添加模糊效果。 | |
对比度 | con | 调整图像的对比度。 | |
滤镜 | filt | 对图像应用滤镜效果。 | |
伽马校正 | gam | 调整图像伽马校正调整图片色彩。 | |
调制 | mod | 使用亮度、饱和度和色调旋转来变换图像。 | |
饱和 | sat | 调整图像的饱和度。 | |
色调旋转 | hue | 对图像应用色调旋转。 | |
锐化 | sharp | 锐化图像。 | |
着色 | tint | 对图像着色。 | |
格式(Format) | 自适应滤波(降噪) | af | 对图片进行像素滤波以实现降噪和增强的效果。可图像压缩前应用。 |
Base64编码(URL数据) | encoding | 对`<img>`标签`src=`属性下的URL进行Base64编码。 | |
缓存控制 | maxage | 控制浏览器对图像的缓存时间。 | |
压缩级别 | l | zlib 压缩级别。 | |
默认图像 | default | 图像加载出问题时,返回指定的默认图像。 | |
文件名 | filename | 指定文件名。 | |
隔行扫描/逐行扫描 | il | 对`GIF`和`PNG`图像添加隔行扫描;对`JPEG`图像添加逐行扫描。 | |
页数 | n | 选择要加载的图片页数。 | |
输出个数 | output | 将图像编码为特定格式后输出。 | |
页 | page | 加载指定的页面。 | |
质量 | q | 设置图像的质量。 |
尺寸(Size)
控制调整图像的大小。您可以同时使用宽度参数&w=
和高度参数&h=
;也可以仅使用一个维度参数,另一个维度参数值会自动更新。
宽度
调用参数:&w=
参数说明:设置图像的宽度,以像素为单位。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300
图片示例:
高度
调用参数:&h=
参数说明:设置图像的高度,以像素为单位。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&h=300
图片示例:
设备像素比
调用参数:&dpr=
参数说明:设备像素比率(DPR)是用于进行CSS 像素和设备像素转换的指标,DPR = 物理像素(设备像素) / 独立像素(CSS像素)。针对不同设备设置合适的DPR(例如具备视网膜显示技术的苹果设备和安卓设置),可以使图像在不同的设备中以正确的像素密度显示。设置设备像素比率时,您必须指定图像的宽度或者高度(或者宽度和高度均指定)。支持设置的参数值范围在1~8之间。了解更多信息。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&h=144&dpr=2
图片示例:
适配(Fit)
控制图像的大小和位置,使其适应其容器。下面是几个例子。其中有一些参数值是基于CSS属性object-fit提供的。
内部
调用参数:&fit=inside
参数说明:默认值。将图像以尽可能大的尺寸缩放到目标容器内部,以确保其尺寸小于或等于目标容器尺寸,同时保持其宽高比例不变。缩放后的图像不会超出容器的边界。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=inside
图片示例:
外部
调用参数:&fit=outside
参数说明:表示将图像以尽可能小的尺寸缩放到容器外部,以确保其尺寸大于或等于目标容器尺寸,同时保持其宽高比例不变。缩放后的图像可能会超出容器的边界。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=outside
图片示例:
覆盖
调用参数:&fit=cover
参数说明:根据宽高比信息来尽可能地填充容器,可能会裁剪部分内容。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=cover
图片示例:
填充
调用参数:&fit=fill
参数说明:忽略输入的宽高比,将图片完全填充满容器,可能出现拉伸变形的情况。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=fill
图片示例:
包含
调用参数:&fit=contain
参数说明:根据宽高比信息来尽可能地填充容器,不会对内容进行裁剪,可能会留有空白。可以对留白部分设置颜色。了解更多信息。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=contain&cbg=black
图片示例:
不放大
调用参数:&we=
参数说明:如果宽度和高度已经小于指定的尺寸,则控制不进行放大。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&w=300&h=300&fit=inside&we
图片示例:
裁剪(Crop)
控制图像的对齐方式。
位置对齐
当使用 &fit=cover
或者 &fit=contain
参数进行图像适配调整时,设置图像如何对齐。使用位置对齐参数时,必须指定高度参数&h
和宽度参数&w
。
基于位置对齐
调用参数:&a=center
,&a=top
,&a=right
…
参数说明:控制裁剪的起始位置。当使用&fit=contain
参数设置图像包含于容器内部时,可指定图像在其容器内的位置。
可设置参数值包括:
center
:居中,默认值top
:顶对齐right
:右对齐left
:左对齐top-left
:顶部居左bottom-left
:底部居左bottom-right
:底部居右top-right
:顶部居右调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=cover&a=top
图片示例:
基于焦点对齐
调用参数:&a=focal
参数说明:使用焦点来更精确地设置对齐方式。可以使用水平(&fpx=
)和垂直(&fpy=
)偏移小数值(介于10.0和1.0之间的浮点数值)来设置坐标焦点。默认值为0.5,即图像的中心。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=cover&a=focal&fpy=0.45
图片示例:
智能裁剪
调用参数:&a=entropy
,&a=attention
参数说明:使用一种基于策略的实验性方法,通过智能删除无趣部分来裁剪图片。改功能只有设置&fit=cover
时可配合使用。
可设置的策略参数包括:
entropy
:聚焦于具有最高香农熵(Shannon entropy)的区域。attention
:聚焦于具有最高亮度频率、色彩饱和度以及皮肤色调的区域。调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=cover&a=attention
图片示例:
矩形裁剪
调用参数:&cx=
,&cy=
,&cw=
,&ch=
参数说明:在任何其他调整大小的操作后,将图像裁剪为特定尺寸。
温馨提示:您可以使用
&precrop
,进行预调整裁剪。了解更多信息。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&cx=680&cy=500&cw=300&ch=300
图片示例:
修剪
调用参数:&trim=
参数说明:修剪图片边缘的“无聊”像素。取图片左上角那个点的像素,然后从图片边缘开始将跟那个像素点相似度在一定范围内的边缘区域像素修剪掉。修剪操作的执行顺序发生在任何调整大小操作之前。可以使用介于1~254之间的值来定义色值相似度的容差级别。您也可以只指定&trim
,默认容差级别为10。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&trim=10
图片示例:
遮罩(Mask)
控制图像可见和不可见的区域。
遮罩类型
调用参数:&mask=
参数说明:从预定义的形状列表中设置遮罩类型。了解更多信息。
circle
:圆形ellipse
:椭圆形triangle
:三角形tri-angle-180
:倒置的三角形pentagon
:五边形pentagan-180
:倒置的五边形hexagon
:六边形square
:倾斜45度正方形star
:五角星形heart
:心形调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=cover&mask=circle
图片示例:
遮罩修剪
调用参数:&mtrim=
参数说明:从遮罩中删除掉多余的白色空白区域。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=900&fit=cover&a=crop-22-0&mask=circle&mtrim
图片示例:
遮罩背景
调用参数:&mbg=
参数说明:设置遮罩的背景色。可以对遮罩设置颜色。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=400&bg=black&mask=heart&mbg=red
图片示例:
方向(Orientation)
通过沿轴翻转或绕中心旋转来更改图像的方向。
垂直翻转
调用参数:&flip=
参数说明:围绕 Y 轴垂直翻转图像。图像翻转的执行顺序发生在旋转之后。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&h=300&flip
图片示例:
水平翻转
调用参数:&flop=
参数说明:围绕 X 轴水平翻转图像。图像翻转的执行顺序发生在旋转之后。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&h=300&flop
图片示例:
旋转
调用参数:&ro=
参数说明:以显式角度旋转图像,或者基于EXIF信息中的Orientation标签信息来自动旋转图像。如果指定了一个角度,则将其转换为有效的正角度旋转,例如,-450度将产生270度旋转。当旋转角度不是90度的倍数时,可以使用&rbg=
参数设置背景颜色。如果没有提供角度,则根据EXIF信息来确定旋转角度。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&h=300&ro=45&rbg=red
图片示例:
调整(Adjustment)
执行类似于图像编辑应用程序中的操作。
背景色
调用参数:&bg=
参数说明:设置图像的背景颜色。支持多种颜色格式。除了所有通用浏览器都支持的 140 种颜色名称,还支持十六进制的 RGB 和 RBG alpha 格式。
支持的十六进制RGB格式:
ccc
5ccc
cccccc
55ccccc
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=400&bg=black
图片示例:
模糊虚化
调用参数:&blur=
参数说明:为图像添加模糊效果。当不带参数值(&blur)时,对输出图像进行快速、温和的模糊处理。当指定参数值时,执行更慢、更准确的高斯模糊。可支持的参数值范围在0.3~1000之间。代表高斯掩模的标准差,其中,sigma = 1 +radius/ 2
。了解更多信息。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&blur=5
图片示例:
对比度
调用参数:&con=
参数说明:设置图像的对比度。可选配置值范围是-100~100之间,其中,配置0表示没有变化。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&con=25
图片示例:
滤镜
调用参数:&filt=
参数说明:对图片使用滤镜。支持的滤镜及其参数:
Greyscale
:灰度。将图像转换为黑白灰度图像,使图像失去彩色,只保留灰度信息。sepia
:棕褐色。将图像转换为棕褐色调,使图像呈现出复古的感觉。duotone
:使用两种颜色来创建一种特殊的视觉效果。常见的例子是将一幅黑白照片转换成只有两种颜色的图像,这样可以使图像看起来更有艺术感。gegate
:在图像中添加网格状线条的过程。通常是用于增强黑白图像的效果,使图像看起来更加清晰和锐利。网格状的线条可以减少图像中的模糊和噪点干扰,从而达到更佳的效果。温馨提示:可以使用 &start 和 &stop 来定义双色调。默认情况下,使用
&start=C83658
、&stop=D8E74F
。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&h=300&fit=cover&a=focal&fpx=0.6&filt=duotone
图片示例:
伽马校正
调用参数:&gam=
参数说明:调整图像伽玛。使用伽马校正来处理图片颜色,是指对图像的亮度值进行调整,以使其在不同设备和软件上显示时更加一致。伽马校正是一种非线性的亮度调整方法,它可以使图像在显示器上的亮度更加均匀,同时避免亮度值过低或过高的情况。在sRGB颜色空间中,伽马默认值为2.2,因此sRGB图像通常需要进行伽马校正。支持输入的参数值范围是1.0~3.0。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&gam=3
图片示例:
调制
使用亮度、饱和度和色调旋转来变换图像。可以单独调整亮度(&mod=
)、饱和度(&sat=
)和色调旋转(&hue=
)参数值;也可以直接使用&mod=[亮度系数],[饱和度系数],[旋转度数]
让这三个调制维度同时生效。
亮度
调用参数:&mod=
参数说明:调整图像的亮度。配置参数系数大于1,表示增加亮度;配置参数系数小于1,表示降低亮度。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&mod=2
图片示例:
饱和度
调用参数:&sat=
参数说明:调整图像的饱和度。配置参数系数大于1,表示增加饱和度;配置参数系数小于1,表示降低饱和度。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&sat=0.5
图片示例:
色调旋转
调用参数:&hue=
参数说明:对图像进行色调旋转。色调旋转是一种调整图像颜色的方法,它通过改变图像中每个像素的色调(hue)值来改变图像的整体色调。正方向旋转增加色调值,使图像的色调变得更加鲜艳、明亮;负方向旋转降低色调值,使图像的色调变得更加暗淡、柔和。色调值以旋转度数为单位,没有最大值或者最小值。&hue=N
代表N/360。例如,设置N为90,则表示正向旋转90度。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&hue=90
图片示例:
锐化
调用参数:&sharp=
参数说明:锐化图像。通过调整LAB颜色空间中的L通道增加像素值的亮度差异,以此实现增强图像的清晰度。支持根据图像中的平坦区域和锯齿状区域来控制图像的锐化程度:针对图像中灰度变化缓慢、平坦的区域,这些区域的像素值变化不明显,缺乏细节和纹理,可以使用&sharpf=
增强其清晰度;针对图像中灰度变化剧烈、纹理丰富的区域,这些区域的像素值变化明显,具有细节和纹理,可以使用&sharpj=
保留细节和纹理。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&sharp=3
图片示例:
着色
调用参数:&tint=
参数说明:使用提供的色值对图像进行着色,同时保留图像的亮度。查看支持的颜色格式。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&tint=red
图片示例:
格式(Format)
控制图像的输出属性。
自适应滤波(降噪)
调用参数:&af=
参数说明:使用自适应滤波技术,对像素行进行滤波实现降噪和增强的效果,以此减少PNG文件的大小。该功能仅在输出图像格式为png
时生效。
Base64编码(URL数据)
调用参数:&encoding=base64
参数说明:对<img>
标签src=
属性下的URL进行编码,以返回Base64编码过后的图像。了解更多信息。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&crop=100,100,720,530&encoding=base64
响应示例:
data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCABkAGQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwX/xAAmEAADAAIBBAICAgMAAAAAAAAAAREhMQJBUWFxEoEysSKRQtHw/8QAGQEBAQEAAwAAAAAAAAAAAAAAAAECAwYH/8QAFxEBAQEBAAAAAAAAAAAAAAAAABEBMf/aAAwDAQACEQMRAD8A5um14EnFCn+XkTp6w6lDnSbQksje2/ALDCjl0Y9pCeWhz+gmYl/Y5+waoNxOBom8f7HcdvQNKArmdMgLirZAaSY5QbryE6a1sCY1rQAimq1HMieKy3x1sUm+pKlTIsZG1gaVnsppJKiiFO2Qk6UpJZnQGo54FXExx0c3UHFXZUxCUqZItewT3jIJZb2gaiwKBIXFNplNfb8DWnIDdR8WBcoCpTawhpYSeSlGn4Jadc2RBMVWbBqrsVMQSVedgJcam3sGslTNT+hNVrv46AT/AI4VDqsSot9uxOtALitzA0rOqGokJJJrOQsTyTXJDeJgtqsnksrsDCXKIBQCrGvFZGl+ypF2BKcc5MVlM/l5CZb3Ckn8mD0+opUNO1LY0sfZUqWYEab7CiX2SJ+NeUUk/kqU19MUZzsDTl6lSbWCmq8CjNK0JaikpYPivryWqzaYGnxXkBStOSoL8ZNFT+hJZf8ARx1hKTj6dAmFk0kWsfoTmKKIkfgOSxgqZ3gbSnkVaySa0sDjfJFNbg3tUtVHcOKbWENLL/6hxi24WifQSFtK4qCYy9iiXxuaAcdASjdpP9EtRp+TSZBqPJhlO/RMmso0i2gl2BmlbF1HxVWi5jGmCWeqAzlbXQXxbbevZrK2SuOfYq1M2TyRs+MyyeXHDFVMxZhA1j2NKLUFf5CiYBT2BaNl+QPLYAZZEz9B1foAAS2OTkAAHLYtsAAfLoHPWkABcQt/Qms8QAqk3kAAD//Z
缓存控制
调用参数:&maxage
参数说明:定义图像应该被浏览器缓存多长时间。图像处理服务通过更改HTTP标头Cache-Control
的max-age
值来控制图像缓存时间。注意:图像处理如果与CDN一同使用,CDN一般会默认遵循图像处理响应的Cache-Control
头部进行缓存;若CDN有设置缓存时间,则浏览器会优先遵循CDN响应给浏览器的缓存时间。
我们设置缓存“远期到期”,将缓存时间的默认值置为1年。可以使用按照“天”、“周”、“月”、“年”定义缓存时间,取值范围支持1d
(1天)到1y
(1年)(包含)。超出范围内的值将被忽略并使用默认值 1 年。如下:
d
:天w
:周m
:月y
:年调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&maxage=31d
压缩级别
调用参数:&l=
参数说明:zlib压缩级别。可配置值在0~9之间,其中,0表示无Deflate压缩。9表示最大Deflate压缩级别,默认值为6。该功能仅在输出图像格式为png
时生效。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&l=7
默认图片
调用参数:&default=
参数说明:当图像加载出现问题时,会显示错误图像。如果您不想给用户提供损坏的图像,可以设置定义一个默认的图像,当图像加载错误时,展示默认图像。了解更多信息。此处需要注意的是,URL中不能包含default
查询参数,如果包含了查询参数,则会被忽略。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&default=edgetools.8686c.com/default_large.jpg
图片示例:
文件名
调用参数:&filename=
参数说明:在Content-Disposition
头部中指定文件名。该文件名支持字母和数字的字符。
隔行扫描/逐行扫描
调用参数:&il
参数说明:对GIF
和PNG
格式图像添加隔行扫描,以提高图像的帧率和动态感;对JPEG
格式图像添加逐行扫描,以提供更高的图像质量和更清晰的细节。了解更多信息。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&il
图片示例:
页数
调用参数:&n=
参数说明:选择需要加载的图片页数。默认值是1。设置为-1时,表示处理到文件的末页。温馨提示:Webp
和GIF
格式图像都是可以分页的。一个WebP或者GIF图像可以包含多个页面,也称帧(Frame)。每一帧都表示该图像中的一个静态或者动态的画面。在Webp和GIF格式图像中,可以通过调整页数来选择需要处理的帧数,或者设置为-1表示处理整个图像中的所有帧。
调用示例:
?url=edgetools.8686c.com/banana.gif&h=300&output=gif&n=-1
图片示例:
输出格式
调用参数:&output=
参数说明:将图像编码为指定的格式后输出。支持的格式包括:jpg
,png
,gif
,tiff
,webp
,json
。如果没有指定输出格式,则默认遵循源站的图像格式。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&output=webp
图片示例:
页
调用参数:&page=
参数说明:指定需要加载获取的文件页(对于PDF, TIFF和多尺寸ICO文件生效)。该值从0开始编号。对于多分辨率图像,可以使用-1指定获取最大的页面,使用-2指定获取最小的页面。
质量
调用参数:&q=
参数说明:设置图像的质量。支持1~100之间的配置值。默认值为80。该功能仅在输出图像格式为jpg
,tiff
,webp
时生效。
调用示例:
?url=edgetools.8686c.com/largefile.jpg&w=300&q=20
图片示例: