Let Image and Video Manager automatically crop an image using the shape,
size, and the region of interest you provide.
As part of publishing an image, you may want
to specify different focal points and crop around them in certain situations. For example, if
you have a large image with a picture of a beach and palm trees, you might want to display a
smaller image with a focus on just the palm trees when your customer views the image on a
phone or a tablet. You may also want to display the entire image of the beach when your
customer views the image on the desktop. In a typical workflow, you would crop these images
individually making two different versions of the same image. With Image and Video Manager,
you no longer have to create two versions. Image and Video Manager lets you programmatically
display the image you want using the Region of Interest Crop transformation.
The Region of Interest transformation enables designers to specify the shape
and size of the region of interest, and provide Image and Video Manager with cropping
instructions for the width and height of the cropped area. The resulting image preserves as
much of the region of interest as possible given the requested width and height.
Here's the before image and the after image, cropped for a phone or tablet
where the region of interest encompasses both palm trees:
How to
Go to > CDN > Image and Video
Manager.
Select a Contract and a Policy Set Name,
then click Manage
Policies.
Click Add New Policy.
The Name
Your Policy window appears:
Enter the policy name in the Policy Name
field and click OK. In our case, we entered RegionOfInterestCrop.
The Image
Policy Editor appears.
Add the Region of Interest Crop
transformation by expanding the Transformations section and select Region of Interest
Crop.
The Region of Interest Crop configuration screen appears.
Enter these settings for the Region of Interest Crop transformation:
Width and Height. These settings specify the dimensions of
the output image, and can be either a fixed value or a variable. In our case, fix the
width at 200 pixels and the height at 200 pixels.
Crop Style. This setting determines the crop style (crop,
zoom, or fill). It can also be a fixed value or a variable. In this case, choose Fill,
where it fills the area to crop to include as much of the input image as possible
while also including as much of the region of interest as possible and maintaining the
aspect specified by the width and height parameters. The output image resizes to
exactly the specified width and height.
Gravity. Use this
optional setting for aligning the area of crop around the region of interest (using
cardinal directions). It can be a fixed value or variable. For this example, select
Center Gravity.
Select Shape and define the shape settings to identify the
region of interest.
Shape Type. There are
three types of available shapes (point, rectangle, and circle). In our case, we will
choose Rectangle.
Anchor X and Anchor Y
Coordinates. These are the X and Y coordinates for the Northwest corner
of the rectangle. They can be fixed values or variables. In this recipe, we will
specify 900 pixels as the X coordinate and 150 pixels as the Y coordinate.
Width and Height. These
parameters define the dimensions of the region of interest. They can be fixed values
or variables. In this recipe, we will specify both width and height as 50 pixels.
It’s important to remember that Image and Video Manager transformations
can also be executed programmatically using Akamai’s OPEN APIs or Image and Video
Manager Query Language. For instance, here is the JSON-formatted API call for our
transformation:
Now that we configured the Region of
Interest Crop transformation, we can preview its output, where we cropped the image around a
rectangular region of interest (50 x 50 pixels in size, anchor coordinates at x=900 and y=150
pixels) within a crop box (200 pixels width x 200 pixels height) with fill crop style and
center gravity. Here is the original image with the region of interest outlined in blue, and
the fill area outlined in red: