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

缩放

最近更新时间2023.01.06 18:02:42

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

您可以通过图片缩放参数,调整 veImageX 的图片大小。本文介绍 veImageX 图片处理中的图片缩放功能参数及示例。

缩放说明

  • 指定缩放后宽/高值后,结果图将自动适配对应大小。
  • 等比缩放:
    • 等比缩放 contain 模式:即等比缩放后图片的宽高均不超过设置值,结果图限制为指定宽高矩形容器内的最大图片;
    • 等比缩放 cover 模式:即等比缩放后图片的宽或高超过设置值,结果图为延伸出指定宽高矩形容器框外的最小图片。
  • 不等比缩放:不保持原图宽高比,以指定宽高强制缩放,此操作可能导致结果图变形。
  • 当仅指定放大,图片小于设置的宽/高时,将放大图片,反之图片将不做调整。
  • 当仅选中缩小,图片大于设置的宽/高时,将缩小图片,反之图片将不做调整。
  • 您可以同时指定放大和缩小。

注意事项

  • 支持静图动图的缩放处理。
  • 缩放为 veImageX 的基础图片处理功能,具体计费详情,请参考后付费-按量计费
  • 控制台同时支持配置动态输入方式,可通过在 URL 中自定义宽高值来动态控制宽高。

说明

在使用 URL 动态输入时,您可以通过自定义结果图访问 URL 上参数值,从而获取多种图片缩放效果结果图。例如访问 URL 为:http(s)://域名/图片URI~模板名称:resize_width:resize_height.png,其中resize_width为缩放图设置宽,resize_height为缩放图设置高。

效果图

下图为您展示了不同缩放程度下的效果图与原图的图片大小对比。

  • 指定等比 contain 模式下,且指定宽度为 400,高度为 400。

访问地址示例如下,在网站输入该地址后支持您自定义缩放宽高大小,查看不同图片效果:

http://p3-mofang.byteimg.com/tos-cn-i-x9vch4xmek/example.jfif~tplv-x9vch4xmek-resize-v1:400:400.image
缩放前原图缩放后结果图
alt
  • 不保持原图宽高比,仅指定宽度为 400,高度为 400。

访问地址示例如下,在网站输入该地址后支持您自定义缩放宽高大小,查看不同图片效果:

http://p3-mofang.byteimg.com/tos-cn-i-x9vch4xmek/example.jfif~tplv-x9vch4xmek-resize-v2:400:400.image
缩放前原图缩放后结果图
alt

使用方法

使用控制台

Step 1:创建模板

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

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

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

使用 OpenAPI

Step 1:创建模板

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

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

在创建模板后,您可以通过调用 GetResourceURL获取经模板处理后的结果图访问地址。

案例讲解

在调用 CreateImageTemplate 接口创建模板时,您需要设置Filters组合参数配置您的图片处理功能配置,具体的参数配置请参考图片编辑数据结构

  • Name取值为resize:即缩放功能名称;
  • Param为具体的操作参数:Key为缩放各参数名称,Value为相应参数设置。

以上效果图中指定 contain 等比缩放模式,且指定宽度为 400,高度为 400 的Filters请求示例如下所示。

"Filters":[
      {
         "Name":"resize",
         "Param":{
		        "width": 400,                              //设置宽度为400px
            "height": 400,                             //设置高度为400px
            "keepratio": true,                         //表示保持原图宽高比
            "mode": contain,                           //表示选择 contain 等比缩放模式
            "policy":0                                 //表示缩放适配同时指定放大和缩小,即缩放均可
            }
       }
  ]