最近更新时间:2022.09.23 10:31:48
首次发布时间:2022.08.31 11:00:54
veImageX 支持您通过配置圆角矩形参数,选择圆角为正圆或椭圆后将 veImageX 中存储矩形图片的 4 个角切成圆角。本文介绍使用圆角矩形裁剪图片时的注意事项、使用方法和案例讲解。
说明
在使用 URL 动态输入时,您可以通过自定义结果图访问 URL 上参数值,从而获取多种圆角矩形结果图。例如访问 URL 为:http(s)://域名/图片URI~模板名称:round-corner_radius.png,其中round-corner_radius
为正圆圆角半径设置值。
您可以通过登录 veImageX 控制台创建模板,具体操作详情请参考新建模板。
如果您已在控制台创建好模板,则在控制台获取您的结果图访问地址的具体操作请参考获取结果图 URL。
您可以通过调用 CreateImageTemplate创建您的模板,veImageX 也支持在该接口与其他功能进行组合配置创建模板。
在创建模板后,您可以通过调用 GetResourceURL获取经模板处理后的结果图访问地址。
下图为您展示了圆角为正圆时的结果图参数介绍。
正圆圆角示例图访问地址如下所示,您可在网站输入该地址并自定义正圆圆角半径,查看多种图片效果:
http://p3-mofang.byteimg.com/tos-cn-i-x9vch4xmek/example.jfif~tplv-x9vch4xmek-round-corner-zy-1:400.image
在调用 CreateImageTemplate 接口创建模板时,您需要设置Filters
组合参数配置您的图片处理功能配置,具体的参数配置请参考图片编辑数据结构。
Name
取值为round-corner
:即圆角矩形功能名称;Param
为具体的操作参数:Key
为圆角矩形各参数名称,Value
为相应参数设置。上图案例配置的部分关键参数如下所示:
"Filters":[ { "Name":"round-corner", "Param":{ "radius":400, //正圆圆角半径为400px "type":"circle" //圆角为正圆 } } ]
下图为您展示了圆角为椭圆时的结果图参数介绍。
椭圆圆角示例图访问地址如下所示,您可在网站输入该地址并自定义椭圆双边圆角半径,查看多种图片效果:
http://p3-mofang.byteimg.com/tos-cn-i-x9vch4xmek/example.jfif~tplv-x9vch4xmek-round-corner-ty-1:450:300.image
在调用 CreateImageTemplate 接口创建模板时,您需要设置Filters
组合参数配置您的图片处理功能配置,具体的参数配置请参考图片编辑数据结构。
Name
取值为round-corner
:即圆角矩形功能名称;Param
为具体的操作参数:Key
为圆角矩形各参数名称,Value
为相应参数设置。上图案例配置的部分关键参数如下所示:
"Filters":[ { "Name":"round-corner", "Param":{ "radius_x":450, //椭圆圆角水平半径为450px "radius_y":300, //椭圆圆角垂直半径为300px "type":"ellipse" //圆角为椭圆 } } ]