All Products
Search

This Product

    CDN:Crop images

    Document Center

    CDN:Crop images

    Last Updated:Oct 14, 2024

    You can crop images to remove irrelevant or redundant parts in images, emphasize major parts of images, and adjust the aspect ratio of images. You can add a cropping parameter to a request URL to crop an image in Alibaba Cloud CDN to a specific size.

    Note

    • The image editing feature of Alibaba Cloud CDN, the image editing feature of DCDN, and the Image Processing (IMG) feature of Object Storage Service (OSS) are three different features.

    • Image editing is free of charge until further notice.

    • When you use the image editing feature, conversion between different image formats, such as JPEG to WebP, JPEG to PNG, and PNG to WebP, may result in larger image sizes. This is because different image formats use different compression algorithms. If you want to reduce image sizes, we recommend that you configure the quality parameter to reduce the image quality.

    Parameters

    Set the action to crop or circle.

    The following table describes the parameters.

    Note

    If one of the preceding parameters is set to a negative value, the image remains in its original size.

    Parameter

    Description

    Valid value

    w

    The width of the cropped area.

    The default value is 0. The total pixels of the image cannot exceed 16,777,216 pixels.

    h

    The height of the cropped area.

    x

    The X coordinate of the cropped area. The default value is the X coordinate of the upper-left corner of the image.

    y

    The Y coordinate of the cropped area. The default value is the Y coordinate of the upper-left corner of the image.

    g

    The position of the area that you want to crop in a 3 by 3 grid. The image is arranged in a 3 by 3 grid, which has 9 tiles. Each tile is positioned by its upper-left corner.

    • nw: upper left

    • north: upper middle

    • ne: upper right

    • west: middle left

    • center: center

    • east: middle right

    • sw: lower left

    • south: lower middle

    • se: lower right

    For more information, see the following figure that shows the position of each tile in a 3 by 3 grid.

    The following figure shows the position of each tile in a 3 by 3 grid.图片裁剪

    Examples

    The following table describes how to crop images.

    Feature

    Description

    Example

    Cropping in a circle shape

    You can specify the radius of a circle to crop an image. The radius cannot exceed half the length of the shorter side of the base image.

    http(s)://example.com/image01.png?image_process=circle,200

    Cropping in a 3 by 3 grid

    An image can be represented by a 3 by 3 grid. You can specify the position of the tile in the grid that you want to crop.

    http(s)://example.com/image01.png?image_process=crop,w_200,h_200,g_se

    Cropping based on an X and Y coordinate

    You can specify the X coordinate, y coordinate, width, and height to crop an image. The X and Y coordinate represents the lower-left corner of the cropped area. The width and height specify the size of the cropped area.

    http(s)://example.com/image01.png?image_process=crop,x_10,y_10,w_400,h_200

    Centered cropping

    You can specify the width and height to crop equally on all four sides at a time.

    http(s)://example.com/image01.png?image_process=crop,mid,w_400,h_200