tencent cloud

Feedback

Cropping

Last updated: 2022-07-28 15:10:36

    Overview

    CI uses the imageMogr2 API to crop images, including regular cropping, scaling and cropping, cropping to circle, rounded corner cropping, and smart face cropping.

    An image can be processed:

    • During download
    • During upload
    • In the cloud

    Restrictions

    • Format: Currently, JPG, BMP, GIF, PNG, and WebP images can be processed, and HEIF images can be decoded and processed.
    • Size: The input image cannot be larger than 32 MB, with its width and height not exceeding 30,000 pixels respectively, and the total number of pixels not exceeding 250 million. The width and height of the output image cannot exceed 9,999 pixels respectively. For an animated input image, the total number of pixels (width * height * number of frames) cannot exceed 250 million.
    • Frames (for animated images): For GIF images, the number of frames cannot exceed 300.

    API Sample

    1. Processing during download

    download_url?imageMogr2/cut/<width>x<height>x<dx>x<dy>
                         /crop/<imageSizeAndOffsetGeometry>
                         /iradius/<radius>
                         /rradius/<radius>
                         /scrop/<Width>x<Height>
    
    Note:

    Spaces and line breaks above are for readability only and can be ignored.

    2. Processing during upload

    PUT /<ObjectKey> HTTP/1.1
    Host: <BucketName-APPID>.cos.<Region>.myqcloud.com
    Date: GMT Date
    Authorization: Auth String
    Pic-Operations: 
    {
    "is_pic_info": 1,
    "rules": [{
        "fileid": "exampleobject",
        "rule": "imageMogr2/cut/<width>x<height>x<dx>x<dy>
                         /crop/<imageSizeAndOffsetGeometry>
                         /iradius/<radius>
                         /rradius/<radius>
                         /scrop/<Width>x<Height>"
    }]
    }
    
    Note:

    Pic-Operations is a JSON string. Its parameters are as described in Persistent Image Processing.

    3. Processing in-cloud data

    POST /<ObjectKey>?image_process HTTP/1.1
    Host: <BucketName-APPID>.cos.<Region>.myqcloud.com
    Date: GMT Date
    Content-length: Size
    Authorization: Auth String
    Pic-Operations: 
    {
    "is_pic_info": 1,
    "rules": [{
        "fileid": "exampleobject",
        "rule": "imageMogr2/cut/<width>x<height>x<dx>x<dy>
                         /crop/<imageSizeAndOffsetGeometry>
                         /iradius/<radius>
                         /rradius/<radius>
                         /scrop/<Width>x<Height>"
    }]
    }
    
    Note:

    Authorization: Auth String (for more information, see Request Signature).

    Parameters

    Parameter Description
    download_url URL of the input image in the format of <BucketName-APPID>.cos.<Region>.myqcloud.com/<picture name>.
    For example, examplebucket-1250000000.cos.ap-shanghai.myqcloud.com/picture.jpeg
    /ignore-error/1 If this parameter is carried and the image fails to be processed because the image is too large or a parameter value exceeds the limit, the input image will be returned with no error reported.

    Parameters for regular cropping

    Operation name: cut.

    Parameter Description
    <width> Width of the output image
    <height> Height of the output image
    <dx> Horizontal offset relative to the top-left vertex
    <dy> Vertical offset relative to the top-left vertex
    Note:

    The values should be greater than 0 and smaller than the width/height of the input image.

    Parameters for scaling and cropping

    Operation name: crop.

    Parameter Description
    /crop/<Width>x Width of the output image with the height unchanged. The value must be greater than 0 and smaller than the width of the input image.
    /crop/x<Height> Height of the output image with the width unchanged. The value must be greater than 0 and smaller than the height of the input image.
    /crop/<Width>x<Height> Width and height of the output image. The values of width and height should be greater than 0 and smaller than those of the input image, respectively.

    When performing scaling and cropping, you can also use the gravity parameter to specify the start position of the operation. For more information, see [Sample 2: Scaling and cropping](#Scaling and cropping).

    Parameters for cropping to circle

    Operation name: iradius.

    Parameter Description
    /iradius/<radius> Crops to a circle. radius specifies the radius of the inscribed circle, which should be an integer greater than zero and less than half of the shorter side of the input image. The center of the inscribed circle is the center of the image. This operation is not supported for GIF images.

    Parameters for rounded corner cropping

    Operation name: rradius.

    Parameter Description
    /rradius/<radius> Crops with round corners. radius specifies the radius of the rounded corner of the image, which should be an integer greater than zero and less than half of the shorter side of the input image. The two sides of the image are the tangent lines of the rounded corner. This operation is not supported for GIF images.

    Parameters for smart face cropping

    Operation name: scrop.

    Parameter Description
    /scrop/<Width>x<Height> Scales and crops an image based on the face position in the image. The width and height of the target image are specified by Width and Height respectively.

    3x3 Grid Position Diagram

    The 3x3 grid position diagram is as follows. Once you specify the gravity parameter for an operation, the corresponding red dot becomes the reference point, and offsets will be relative to this point.

    Note:

    • If gravity is set to center, dx and dy are invalid.
    • If gravity is set to north or south, dx is invalid.
    • If gravity is set to west or east, dy is invalid.

    Samples

    Note:

    Processing during download is used as an example here, which does not store the output image in a bucket. If you need to store the output image, see Persistent Image Processing and use the processing during upload or processing in-cloud data feature.

    Sample 1: Regular cropping

    This example shows how to translate by 100 px horizontally to the right and 10 px vertically to the bottom relative to the top-left vertex of the input image and then crop it according to the specified target image resolution of 600x600 px.

    http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?imageMogr2/cut/600x600x100x10
    

    Input image:

    Output:

    Sample 2: Scaling and cropping

    This example shows how to scale and crop an image to 300x400 px by using the center as the reference point.

    http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?imageMogr2/crop/300x400/gravity/center 
    

    Output:

    Sample 3: Cropping to circle

    This example shows how to crop the input image to a circle with the radius of 200.

    http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?imageMogr2/iradius/200
    

    Output:

    Sample 4: Rounded corner cropping

    This example shows how to crop the input image to rounded corners with the radius of 100.

    http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?imageMogr2/rradius/100 
    

    Output:

    Sample 5: Smart face cropping

    This example shows how to crop the input image to the specified resolution of 100x600 px based on the face position in the image.

    http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?imageMogr2/scrop/100x600
    
    Note:

    If no face is recognized, the input image will be returned.

    Sample 6: Smart face cropping with a signature carried

    This example processes the image in the same way as in the example above, except that a signature is carried. The signature is concatenated with other processing parameters by an ampersand (&).

    http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?q-sign-algorithm=<signature>&imageMogr2/scrop/100x600
    
    Note:

    You can get the value of <signature> as instructed in Request Signature.

    Notes

    To prevent unauthorized users from accessing or downloading the input image by using a URL that does not contain any processing parameter, you can add the processing parameters to the request signature, making the processing parameters the key of the parameter with the value left empty. The following is a simple sample for your reference (it might have expired or become inaccessible). For more information, see Upload via Pre-Signed URL.

    http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?q-sign-algorithm=sha1&q-ak=AKID********************&q-sign-time=1593342360;1593342720&q-key-time=1593342360;1593342720&q-header-list=&q-url-param-list=watermark%252f1%252fimage%252fahr0cdovl2v4yw1wbgvzlteyntewmdawmdqucgljc2gubxlxy2xvdwquy29tl3nodwl5aw4uanbn%252fgravity%252fsoutheast&q-signature=26a429871963375c88081ef60247c5746e834a98&watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTEwMDAwMDQucGljc2gubXlxY2xvdWQuY29tL3NodWl5aW4uanBn/gravity/southeast
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support