You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们
导航

圆角矩形

最近更新时间2022.09.23 10:31:48

首次发布时间2022.08.31 11:00:54

veImageX 支持您通过配置圆角矩形参数,选择圆角为正圆或椭圆后将 veImageX 中存储矩形图片的 4 个角切成圆角。本文介绍使用圆角矩形裁剪图片时的注意事项、使用方法和案例讲解。

注意事项

  • 仅支持静图格式图像处理。
  • 控制台支持通过 URL 动态输入圆角半径。
  • 如果圆角半径大于原图最大内切圆的半径,则按照原图最大内切圆的半径设置圆角(即 r = 原图最小边 ÷ 2)。
  • 图片圆角外的区域填充方式:
    • 如果图片的最终输出格式是 png、webp 等支持透明通道的图片,那么图片圆角外的区域将会以透明填充。
    • 如果图片的最终输出格式是 jpeg,那么图片圆角外的区域以白色进行填充。
  • 圆角矩形为 veImageX 的基础图片处理功能,其计费详情请参见后付费-按量计费

说明

在使用 URL 动态输入时,您可以通过自定义结果图访问 URL 上参数值,从而获取多种圆角矩形结果图。例如访问 URL 为:http(s)://域名/图片URI~模板名称:round-corner_radius.png,其中round-corner_radius为正圆圆角半径设置值。

使用方法

使用控制台

Step 1:创建模板

您可以通过登录 veImageX 控制台创建模板,具体操作详情请参考新建模板

Step 2:获取结果图访问地址

如果您已在控制台创建好模板,则在控制台获取您的结果图访问地址的具体操作请参考获取结果图 URL

使用 OpenAPI

Step 1:创建模板

您可以通过调用 CreateImageTemplate创建您的模板,veImageX 也支持在该接口与其他功能进行组合配置创建模板。

Step 2:获取结果图访问地址

在创建模板后,您可以通过调用 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"          //圆角为椭圆
            }
       }
  ]