Cropping Images

Updated on 2024-10-24 GMT+08:00

Common Cropping

You can edit code on OBS Console or make an API call to crop images.

You can start at any point on an image and crop the image into a rectangle with specified width and height. Table 1 describes the parameters.

This operation is represented by crop.

**Table 1** Common cropping parameters
Parameter	Value Description	Code Example
g	The location where cropping starts. g can be set to tl, top, tr, left, center, right, bl, bottom, or br. Figure 1 shows a 3×3 grid illustrating these values. Each value locates at the top left corner of the cell.	image/crop,x_10,y_10,w_200,h_200,g_br
h	Cropping height. Its value ranges from 0 to Original height.
w	Cropping width. Its value ranges from 0 to Original width.
x	x-coordinate of the start point. The top left corner is the default origin. The parameter value ranges from 0 to Original image width.
y	y-coordinate of the start point. The top left corner is the default origin. The parameter value ranges from 0 to Original image height.

Figure 1 shows the cropping origins.

Figure 1 3×3 grid of cropping origins

NOTE:

If x is larger than the origin width, or y is larger than the origin height, the cropping cannot be executed and a fault will be returned.
If h is larger than the origin height and w is larger than the original width, the image will be cropped to the boundaries.

Examples of Common Cropping

Set the start point of cropping to (1000, 500), and set both the width and height to 1000.
https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/crop,x_1000,y_500,w_1000,h_1000

Set the start point of cropping to (10, 10) in the bottom right (br) cell, and set both the width and height to 200.
https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/crop,x_10,y_10,w_200,h_200,g_br

Inscribed Circles

You can edit code on OBS Console or make an API call to get an inscribed circle of an image.

Choose the image center as the center of a circle, and crop the image according to the specified radius. The image then is cropped into a circle. Table 2 describes the parameters.

This operation is represented by circle.

**Table 2** Inscribed circle parameters
Parameter	Value Description	Code Example
r	Radius specified for the inscribed circle. Its value ranges from 0 to Half of the image's short side.	image/circle,r_100

NOTE:

If the output format is set to JPG, the area outside the inscribed circle is white. If the output format is set to a vector format such as PNG, WebP, or BMP, the area outside the inscribed circle is transparent. PNG is the recommended output format.
Even if r is larger than half of the short side, the generated inscribed circle is still the image's largest inscribed circle (with a radius equal to half of the short side).

Example of Making an Inscribed Circle

Set the radius to 100 and output format to jpg (with the area outside the inscribed circle being white).

https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/circle,r_100

Indexcropping

You can edit code on OBS Console or make an API call to indexcrop images.

Set the top left corner of the image as the starting point. Set x-axis overlapping with the width, and y-axis overlapping with the height. Crop the image into several consecutive partitions horizontally or vertically, each having equal width or height. Get the partition you want according to the index. Table 3 describes the parameters.

This operation is represented by indexcrop.

**Table 3** Indexcropping parameters
Parameter	Value Description	Code Example
x	Width of each partition in horizontal cropping, ranging from 1 to Original image width. x and y cannot be chosen at the same time.	image/indexcrop,x_1000,i_0
y	Height of each partition in vertical cropping, ranging from 1 to Original image height. x and y cannot be chosen at the same time.
i	If there are n partitions in total, the value of i ranges from 0 to n–1. When i is set to 0, you obtain the first partition. If you set i to a value larger than n–1, the original image will be returned.

Examples of Indexcropping

Indexcrop an image into partitions with a width of 1000 horizontally and choose the first partition.
https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/indexcrop,x_1000,i_0

Indexcrop an image into partitions with a width of 600 horizontally and choose the first partition.
https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/indexcrop,x_600,i_0

Rounded Corner Cropping

You can edit code on OBS Console or make an API call to round corners of an image.

This operation allows you to cut off the corners of an image based on the specified radiuses. You can configure the radius of image corners to round in two ways. For details, see Table 4.

This operation is represented by rounded-corners.

**Table 4** Rounded corner parameters
Parameter	Value Description	Code Example
r	It indicates both horizontal and vertical radiuses of image corners you will round. You can configure it by using the number of pixels (for example, 200) or the percentage (for example, 25p). The number of pixels ranges from 1 to 4096. If this number is greater than half of the original image's short side, the half of the short side is applied. The percentage ranges from 1p to 50p. r cannot be used together with rx or ry.	image/rounded-corners,r_100
rx	It indicates the horizontal radius of image corners you will round. You can configure it by using the number of pixels (for example, 200) or the percentage (for example, 25p). The number of pixels ranges from 1 to 4096. If this number is greater than half of the original image's short side, the half of the short side is applied. The percentage ranges from 1p to 50p. rx must be used together with ry.	image/rounded-corners,rx_100,ry_200
ry	It indicates the vertical radius of image corners you will round. You can configure it by using the number of pixels (for example, 200) or the percentage (for example, 25p). The number of pixels ranges from 1 to 4096. If this number is greater than half of the original image's short side, the half of the short side is applied. The percentage ranges from 1p to 50p. ry must be used together with rx.	image/rounded-corners,rx_100,ry_200

NOTE:

If the output image format is JPG, the cut-out corner area is white. If the output image format is PNG, WebP, or BMP, the cut-out corner area is transparent. You are advised to save rounded corner images in PNG.