If you want to resize images stored in Object Storage Service (OSS) to fit your web page or meet layout requirements, you can use the custom crop feature to crop the images into the exact size that you need.
Scenarios
Web page design and production: When you design the layout of a web page, you may need to crop images to a specific size to fit web page elements, such as avatars, background images, and product displays.
Custom image size required by social media: Different social media platforms have different size requirements for images that you want to upload, such as thumbnails, images that you can post, and story images. You need to crop source images based on the recommended size to achieve optimal display performance.
Mobile app development: You must crop images such as icons, startup pages, and embedded pictures in an app based on specific specifications to ensure that the images are displayed as expected on devices with different resolutions and screen sizes.
Image database management: To meet the sorting and archiving requirements of institutions that have a large number of image resources, such as libraries and archives, you may need to crop images to a preset size.
Parameters
Action: crop.
The following table describes the parameters.
Parameter | Description | Value range |
w | The width that you want to crop. | [0, image width] Default value: the maximum value. |
h | The height that you want to crop. | [0, image height] Default value: the maximum value. |
x | The X coordinate of the area that you want to crop. The default value is the X coordinate of the upper-left corner of the image. | [0, image bound] |
y | The Y coordinate of the area that you want to crop. The default value is the Y coordinate of the upper-left corner of the image. | [0, image bound] |
g | The position of the area that you want to crop in a 3 x 3 grid. The image is located in a 3 x 3 grid. The grid has nine tiles. |
For more information about how to calculate the position of each tile, see the following table. |
The following table describes how to calculate the position of each tile in a 3 x 3 grid. srcW specifies the width of the source image and srcH specifies the height of the source image.
Tile | Calculation method |
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 |
Usage notes
If the specified starting X coordinate and Y coordinate exceed those of the source image, the
BadRequesterror code and the Advance cut's position is out of image. error message are returned.If the width and height specified from the starting point exceed those of the source image, the source image is cropped to the boundaries.
You can use object URLs, OSS SDKs, or API operations to configure image processing (IMG) parameters that are used to process images. In this topic, object URLs are used. You can use object URLs to configure IMG parameters only for public-read-write images. If you want to configure IMG parameters for private images, use OSS SDKs or call API operations. For more information, see IMG implementation modes.
Examples
In the following examples, an image in a bucket named oss-console-img-demo-cn-hangzhou-3az in the China (Hangzhou) region is used as the source image. The image can be accessed over the Internet by using the following URL:
Crop an image from the starting point (800, 50) to the boundaries
Configure the parameters based on the following requirements:
From the starting point (800, 50):
crop,x_800,y_50.To the boundaries: By default, the maximum values of w and h are used to crop the image. You can ignore the w and h parameters.
The URL used to process the image: https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,x_800,y_50
Crop an area of 300 × 300 pixels from the starting point (800, 500)
Configure the parameters based on the following requirements:
From the starting point (800, 500):
crop,x_800,y_500.An area of 300 × 300 pixels:
w_300,h_300
The URL used to process the image: 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
Crop an area of 900 × 900 pixels in the lower-right corner of the source image
Configure the parameters based on the following requirements:
From the starting point in the lower-right corner of the source image:
crop,g_seAn area of 900 × 900 pixels:
w_900,h_900
The URL used to process the image: 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
Crop an area of 900 × 900 pixels in the lower-right corner of an image and stretch the cropped area downward by (100, 100)
Configure the parameters based on the following requirements:
From the starting point in the lower-right corner of the source image and stretch the cropped area downward by (100, 100):
crop,g_se,x_100,y_100An area of 900 × 900 pixels:
w_900,h_900
The URL used to process the image: 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
