文档

自定义裁剪

更新时间:

如果您希望获取指定大小的OSS图片,以适配网页元素或者满足排版格式的要求,您可以使用自定义裁剪功能。

使用场景

  • 网页设计与制作:在设计网页布局时,可能需要将图片裁剪成特定尺寸以适应网页元素,如头像、背景图、产品展示图等。

  • 社交媒体发布:不同社交媒体平台对图片上传有各自的尺寸要求,例如封面照片、帖子图片、故事图片等,您需要按照推荐尺寸进行图片裁剪,以达到最佳展示效果。

  • 移动应用开发:App中的图标、启动页、内嵌图片等都需要按规格裁剪,确保在不同分辨率和屏幕尺寸的设备上都能正确显示。

  • 图像数据库管理:对于拥有大量图像资源的机构,例如图书馆、档案馆等,整理和归档时可能需要统一裁剪图片至预设尺寸。

注意事项

  • 如果指定起点的横纵坐标大于原图,将会返回BadRequest错误,错误信息为Advance cut's position is out of image.

  • 如果从起点开始指定的宽度和高度超过了原图,将会直接裁剪到原图边界为止。

  • 您可以通过文件URL、SDK、API方式设置图片处理参数。本文以文件URL为例进行介绍,人脸裁剪和智能算法裁剪示例除外。文件URL仅适用于公共访问的图片。如果是私有访问的图片,请使用SDK、API处理图片。更多信息,请参见图片处理操作方式

参数说明

操作名称:crop

参数说明如下:

参数

描述

取值范围

w

指定裁剪宽度。

[0,图片宽度]

默认为最大值。

h

指定裁剪高度。

[0,图片高度]

默认为最大值。

x

指定裁剪起点横坐标(默认左上角为原点)。

[0,图片边界]

y

指定裁剪起点纵坐标(默认左上角为原点)。

[0,图片边界]

g

设置裁剪的原点位置。原点按照九宫格的形式分布,一共有九个位置可以设置。

  • nw:左上

  • north:中上

  • ne:右上

  • west:左中

  • center:中部

  • east:右中

  • sw:左下

  • south:中下

  • se:右下

  • face:最大人脸

  • auto:自动

说明

face和auto参数相关说明如下:

  • 需要先绑定IMM Project。关于控制台和API如何绑定,请参见快速入门AttachOSSBucket

  • 不支持匿名访问。

  • 必须拥有IMM处理所需的相关权限。更多信息,请参见权限

  • auto参数会忽略传入的w、h、p参数,以算法推荐的w和h为准。

关于各裁剪原点位置的计算方法,请参见计算方法

p

倍率参数。

[1,200],以百分比为单位。

说明

仅当设置g_face时该参数生效。

各裁剪原点位置的计算方法如下。其中srcW代表原图宽度,srcH代表原图高度。

裁剪原点

位置计算方法

nw

0, 0

north

srcW/2 - w/2, 0

ne

srcW - w, 0

west

0, srcH/2 - h/2

center

srcW/2 - w/2, srcH/2 - h/2

east

srcW - w, srcH/2 - h/2

sw

0, srcH - h

sourth

srcW/2 - w/2, srcH - h

se

srcW - w, srcH - h

示例

本文示例使用的Bucket为杭州地域名为oss-console-img-demo-cn-hangzhou-3az的Bucket,图片外网访问地址为:

  • 从(800,50)开始,裁减至图片边界

    需求及处理参数如下:

    • 裁剪起点为(800,50):crop,x_800,y_50

    • 裁减至图片边界:裁剪时默认使用w和h的最大值,所以可省略w和h参数。

  • 从(800,500)开始,裁剪300 px*300 px大小的图片

    需求及处理参数如下:

    • 裁剪起点为(800,500):crop,x_800,y_500

    • 裁减范围300 px*300 px:w_300,h_300

    图片处理URL为:https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,x_800,y_500,w_300,h_300

    裁剪2

  • 裁剪原图右下角900 px*900 px的范围

    需求及处理参数如下:

    • 裁剪起点为原图右下角:crop,g_se

    • 裁减范围900 px*900 px:w_900,h_900

    图片处理URL为:https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,w_900,h_900,g_se

    裁剪3

  • 裁剪原图右下角900 px*900 px的范围,起点为相对右下九宫格的左上顶点再位移(100,100)

    需求及处理参数如下:

    • 起点为原图右下角再位移(100,100):crop,g_se,x_100,y_100

    • 裁减范围900 px*900 px:w_900,h_900

    图片处理URL为:https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,x_100,y_100,w_900,h_900,g_se

    裁剪4

  • 裁剪原图以人脸为中心200 px*200 px的范围

    需求及处理参数如下:

    • 裁剪起点为原图右下角:crop,g_face

    • 裁减范围200 px*200 px:w_200,h_200

    您需要签名后才能进行人脸裁剪。通过Python SDK进行签名访问的示例代码如下:

    import os
    import oss2
    
    # 首先初始化AccessKeyId、AccessKeySecret、Endpoint等信息。
    # 以杭州区域为例,Endpoint可以是:
    #   http://oss-cn-hangzhou.aliyuncs.com
    #   https://oss-cn-hangzhou.aliyuncs.com
    # 分别以HTTP、HTTPS协议访问。
    # 通过环境变量获取相关信息。
    access_key_id = os.getenv('OSS_TEST_ACCESS_KEY_ID')
    access_key_secret = os.getenv('OSS_TEST_ACCESS_KEY_SECRET')
    bucket_name = os.getenv('OSS_TEST_BUCKET')
    endpoint = os.getenv('OSS_TEST_ENDPOINT')
    
    # 创建Bucket对象,所有Object相关的接口都可以通过Bucket对象来进行。
    bucket = oss2.Bucket(oss2.Auth(access_key_id, access_key_secret), endpoint, bucket_name)
    
    # 人脸图片。
    key = 'example1.jpg'
    
    # 下载文件路径。
    local_file_name = 'process.jpg'
    
    # 最大人脸裁剪。
    process = 'image/crop,g_face,w_200,h_200'
    result = bucket.get_object_to_file(key, local_file_name, process=process)

    裁剪后的示例效果如下:

    人脸

  • 智能算法智能裁剪

    需求及处理参数为:crop,g_auto

    您需要签名后才能进行智能算法智能裁剪。通过Python SDK进行签名访问的核心示例代码段如下:

    # 智能算法智能裁剪。process = 'image/crop,g_auto'
    说明

    完整代码请参见裁剪原图以人脸为中心200 px*200 px的范围中的示例代码。

    裁剪后的示例效果如下:

    人脸2

  • 裁剪原图以人脸为中心2倍放大区域的范围

    需求及处理参数如下:

    • 裁剪起点为原图右下角:crop,g_face

    • 裁减范围2倍人脸框大小:p_200

    您需要签名后才能进行人脸裁剪。通过Python SDK进行签名访问的核心示例代码段如下:

    # 人脸2倍区域裁剪。
    process = 'image/crop,g_face,p_200'
    说明

    完整代码请参见裁剪原图以人脸为中心200 px*200 px的范围中的示例代码。

    裁剪后的示例效果如下:

    人脸3

  • 本页导读 (1)