View a markdown version of this page

Use round cropping - Dynamic Image Transformation for Amazon CloudFront

Use round cropping

This solution can crop images in a circular pattern. To activate round cropping on an image, add the roundCrop property to the edits property in the image request.

  • roundCrop(optional, boolean || object) - Activates the round cropping feature for an original image. If the value is true, then the feature returns a circular cropped image that’s centered from the original image and has a diameter of the smallest edge of the original image. For example:

    const imageRequest = JSON.stringify({ bucket: "<myImageBucket>", key: "<myImage.jpeg>", edits: { roundCrop: true } })

    The following roundCrop variables are shown in the following code sample:

    roundCrop.rx (optional, number) - Specifies the radius along the x-axis of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half the length of the smallest edge. roundCrop.ry (optional, number) - Specifies the radius along the y-axis of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half the length of the smallest edge. roundCrop.top(optional, number) - Specifies the offset from the top of the original image to place the center of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half of the height. roundCrop.left (optional, number) - Specifies the offset from the left-most edge of the original image to place the center of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half of the width.

    const imageRequest = JSON.stringify({ bucket: "<myImageBucket>", key: "<myImage.jpeg>", edits: { roundCrop: { rx: 30, // x-axis radius ry: 20, // y-axis radius top: 300, // offset from top edge of original image left: 500 // offset from left edge of original image } } })
Note

roundCrop is not supported for animated (such as, GIF) images.