Crop around a focal point

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:
```
{  
    "transformation": "RegionOfInterestCrop",
    "debug":  true,
    "style": "fill", 
    "gravity": "Center",  
    "width": 200, 
    "height": 200, 
    "regionOfInterest": { 
     "anchor": {
       "x": 900,
       "y": 150 
     }, 
     "width": 50,
      "height": 50  
    }
  }
```
To generate the same results using the Image and Video Manager Query Language, use the following URL:
RegionOfInterestCrop=(200,200),style=fill,gravity=Center,regionOfInterest=(anchor=(x=900,y=150),width=50,height=50)

What you should see

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:

Here is the cropped and transformed image:

Next steps

For more information about adding artistic transformations to images, see the Image and Video Manager Help.