How do I add a solid color shape over part of an image?

The question

"How do I add a solid color box over part of an image, such as over someone's face?"

Cloudinary has no dedicated "draw a shape" transformation. Instead, you overlay a tiny solid-color image and stretch it into the shape you need. People use this to:

• Highlight an area: drawing attention to part of an image with a colored marker.
• Mask content: covering part of an image, such as a name or a face.
• Add design elements: adding color blocks behind or beside other layers.

The original asset

The examples start with this photo of a person:

The solution

1. Upload a 1x1 pixel image to your product environment. You can download the one used in these examples, which has the public ID docs/one_black_pixel in the demo product environment. In an overlay (l_), replace each slash in the public ID with a colon, as in l_docs:one_black_pixel.
2. Add it as an overlay (l_) and set its width (w_) and height (h_) in pixels. Equal values make a square.
3. Apply the layer with fl_layer_apply.

This example stretches the pixel to 130x130 pixels. With no gravity, the layer sits in the center of the image:

Change the color of the shape

To change the color, add e_colorize and co_<color> to the layer, before fl_layer_apply:

Position the shape on a detected face

To center the shape on the face in the image, add g_face to the fl_layer_apply component:

To place the shape anywhere else, use a gravity (such as g_north_west) with the x_ and y_ offsets, in the same component as fl_layer_apply.

The shape stays the size that you set with h_ and w_, and doesn't resize to fit the face. Check that it covers the face in your images, or size it as a fraction of the image with fl_relative.

Make the shape see-through

To let the image show through the shape, add the opacity parameter (o_) to the layer, before fl_layer_apply. This example uses 50% opacity:

Related topics

• Image overlays
• Face-detection based transformations
• Add a horizontal line to an image