How to Crop at the Face (Eyes/Mouth) Using Cloudinary for Copyright and Licensing Compliance

When you’re producing external assets to be seen by customers and partners, ensuring compliance with copyright laws and usage rights is critical. It’s also especially difficult considering assets that were once compliant can become non-compliant simply due to the passage of time.

For example, model usage rights expire, and copyright constraints can prevent you from using an asset in your latest campaign. When issues like these arise, cropping the face can be an effective way to make the most of your visual media. 

This guide walks you through a solution using Cloudinary’s Advanced Facial Attributes Detection Add-on to handle this requirement efficiently.

1. Copyright restrictions. Certain wholesale partners require images of models to be cropped at specific facial features (e.g., below the eyes or above the mouth) before sharing.
2. Usage right expiry. When the licensing rights of a model’s image expire, partial cropping allows continued usage of the image while complying with legal requirements.

By leveraging Cloudinary’s Advanced Facial Attributes Detection Add-on, you can:

1. Detect facial landmarks like the eyes, nose, and mouth during the upload process.
2. Extract the lowest y coordinate for each feature (eyes, nose, mouth) and store them as contextual metadata.
3. Use this metadata to set up named transformations for cropping images at the desired facial feature.
4. Share the cropped images in collections with predefined templates for download.

To enable detection, use the detection=adv_face parameter during the upload process. This will analyze the image and extract facial landmarks, including the precise coordinates of key features.

const result = {};

const landmarks = e.upload_info?.info?.detection?.adv_face?.data[0].facial_landmarks;

for (const [key, value] of Object.entries(landmarks)) {

    const yValues = [];

    const extractY = obj => {

        for (const subKey in obj) {

            if (typeof obj[subKey] === 'object') {

                extractY(obj[subKey]);

            } else if (subKey === 'y') {

                yValues.push(obj[subKey]);

            }

        }

    };

    extractY(value);

    result[key] = Math.max(...yValues);

}

current_asset.update({"context":{"nose": Math.round(result.nose), "mouth": Math.round(result.mouth), "eye": Math.round(result.eye)}})Code language: JavaScript (javascript)

The on_success callback above stores the detected coordinates of the nose, mouth, and eyes in the asset’s contextual metadata. This ensures the cropping logic is reusable and can adapt to different requirements based on the customer’s needs.

With the contextual metadata in place, you can define named transformations to crop images dynamically based on the desired facial feature.

In this transformation:

• $av_ctx:!mouth!_to_i initializes a variable $av (av can be what you want) by extracting the contextual metadata mouth (likely stored during upload). The to_i function converts the mouth metadata (a string) into an integer.

• c_fill sets the crop mode to fill, meaning the image will be resized and cropped to completely fill the specified dimensions.
• w_w specifies the width of the resulting cropped image. This keeps the same width
• h_h_sub_$av sets the height of the resulting cropped image to the initial height, and subtracts the $av variable (the mouth Y-coordinate) from h_h, which represents the total height of the original image. This creates a cropping area from the mouth to the bottom.

This can be setup through API

cloudinary.v2.api

.create_transformation('crop-at-mouth',

  '$av_ctx:!mouth!_to_i/c_fill,w_w,h_h_sub_$av,g_south')

.then(result=>console.log(result));Code language: JavaScript (javascript)

or via the Media Library Console by going to Transformation Builder, Advanced > Additional Transformations, then copying and pasting: $av_ctx:!mouth!_to_i/c_fill,w_w,h_h_sub_$av,g_south

Once the cropped images are ready, you can organize them into a collection with a specific template for external sharing. Use Cloudinary’s Media Library to upload the desired images to the specified collection, or set up rules on your collection to automatically add assets to the collection that match. 

With Cloudinary’s Advanced Facial Attributes Detection Add-on, managing complex image requirements like cropping at specific facial features becomes seamless and efficient. To learn more about how Cloudinary can help you enhance content workflow efficiency and scalability while ensuring your assets comply with copyright and licensing requirements, contact us today.