You can use the circle parameter to crop an image stored in Object Storage Service (OSS) into a circle. This topic describes the parameters and examples to crop an image into a circle.
Parameters
Operation name: circle
The following table describes the parameter that you can configure when you want to crop an image into a circle.
Parameter | Description | Valid value |
---|---|---|
r | The radius of the circle. | 1 to 4096 |
Usage notes
- If the final format of the image (such as PNG, WebP, or BMP) supports alpha channels, the areas of the image outside the circle become transparent. If the final format of the image is JPG, the areas of the image outside the circle become white. We recommend that you save the processed image in the PNG format.
- If the value of r is greater than half of the shorter side of the source image, the value of r = (The shorter side of the source image - 1)/2. Height and width of the destination image = Value of r x 2 + 1.
Examples
You can process images by using object URLs, OSS SDKs, or API operations. In this example, object URLs are used. For more information about how to use OSS SDKs and API operations to process images, see IMG implementation modes.
In the following examples, an image in a bucket named oss-console-img-demo-cn-hangzhou 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 the source image to obtain a circle whose radius is 100 pixels and save the processed
image in the JPG format. The areas of the image outside the circle become white.
The following URL is used to process the image: https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/circle,r_100
- Crop the source image to obtain a circle whose radius is 100 pixels and save the processed
image in the PNG format. The areas of the image outside the circle become transparent.
The following URL is used to process the image: https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/circle,r_100/format,png