Face-detection based transformations

Cloudinary provides face-detection algorithms for automatically applying transformations according to the detected faces within an image.

Here are examples of some popular use cases that you can accomplish using transformations based on detected faces (combined with other transformations). Click each image to see the URL parameters applied in each case:

Auto-crop profile photos Generate
profile photos
Pixelate detected faces Pixelate
detected faces
Displace images on products Blur and crop
based on
detected faces
Overlay products on facial landmarks Overlay products on
specified facial attributes

Tips

  • Face-detection functionality detects whether faces exist and the coordinates of those faces (or other facial landmarks) in photos. This is not the same as facial-recognition technology, which refers to the ability to recognize which specific people are shown in a photo. While Cloudinary does not provide built-in facial-recognition features, you can combine Cloudinary functionality with other AI technologies to address face recognition needs.
  • If you find that any of the face-detection features described below do not give desired results, contact our support team who can enable a more aggressive face-detection algorithm for you to try.

Face-detection based cropping

Cloudinary supports built-in face-detection capabilities that allow you to intelligently crop your images. To automatically crop an image so that the detected face(s) is used as the center of the derived picture, set the gravity parameter to one of the following values:

  • face - the region of the image that includes the single largest face (g_face for URLs).
  • faces - the region of the image that includes all the faces detected (g_faces for URLs).

For example, the image below of a nice woman with a Blue Morpho butterfly was uploaded to Cloudinary:

Ruby:
Copy to clipboard
cl_image_tag("butterfly.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("butterfly.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('butterfly.jpg'));
Python:
Copy to clipboard
CloudinaryImage("butterfly.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("butterfly.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("butterfly.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('butterfly.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("butterfly.jpg")
React:
Copy to clipboard
<Image publicId="butterfly.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="butterfly.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="butterfly.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("butterfly.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("butterfly.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().generate("butterfly.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("butterfly.jpg")
}.generate()
butterfly.jpg uploaded to Cloudinary

To create a 200x200 version with the fill cropping mode to keep as much as possible of the original image, and using the default center gravity without face detection (for comparison):

Ruby:
Copy to clipboard
cl_image_tag("butterfly.jpg", :height=>200, :width=>200, :crop=>"fill")
PHP v1:
Copy to clipboard
cl_image_tag("butterfly.jpg", array("height"=>200, "width"=>200, "crop"=>"fill"))
PHP v2:
Copy to clipboard
(new ImageTag('butterfly.jpg'))
  ->resize(Resize::fill()->width(200)->height(200));
Python:
Copy to clipboard
CloudinaryImage("butterfly.jpg").image(height=200, width=200, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("butterfly.jpg", {height: 200, width: 200, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(200).width(200).crop("fill")).imageTag("butterfly.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('butterfly.jpg', {height: 200, width: 200, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("butterfly.jpg", {height: 200, width: 200, crop: "fill"})
React:
Copy to clipboard
<Image publicId="butterfly.jpg" >
  <Transformation height="200" width="200" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="butterfly.jpg" >
  <cld-transformation height="200" width="200" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="butterfly.jpg" >
  <cl-transformation height="200" width="200" crop="fill">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(200).Crop("fill")).BuildImageTag("butterfly.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(200).setCrop("fill")).generate("butterfly.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(200).width(200).crop("fill")).generate("butterfly.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("butterfly.jpg")
resize(Resize.fill() {
width(200)
height(200)
})}.generate()
200x200 filled without face detection

Now adding the face gravity parameter to correctly fill the requested dimensions:

Ruby:
Copy to clipboard
cl_image_tag("butterfly.jpg", :gravity=>"face", :height=>200, :width=>200, :crop=>"fill")
PHP v1:
Copy to clipboard
cl_image_tag("butterfly.jpg", array("gravity"=>"face", "height"=>200, "width"=>200, "crop"=>"fill"))
PHP v2:
Copy to clipboard
(new ImageTag('butterfly.jpg'))
  ->resize(Resize::fill()->width(200)->height(200)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("butterfly.jpg").image(gravity="face", height=200, width=200, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("butterfly.jpg", {gravity: "face", height: 200, width: 200, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").height(200).width(200).crop("fill")).imageTag("butterfly.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('butterfly.jpg', {gravity: "face", height: 200, width: 200, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("butterfly.jpg", {gravity: "face", height: 200, width: 200, crop: "fill"})
React:
Copy to clipboard
<Image publicId="butterfly.jpg" >
  <Transformation gravity="face" height="200" width="200" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="butterfly.jpg" >
  <cld-transformation gravity="face" height="200" width="200" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="butterfly.jpg" >
  <cl-transformation gravity="face" height="200" width="200" crop="fill">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(200).Width(200).Crop("fill")).BuildImageTag("butterfly.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(200).setWidth(200).setCrop("fill")).generate("butterfly.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").height(200).width(200).crop("fill")).generate("butterfly.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("butterfly.jpg")
resize(Resize.fill() {
width(200)
height(200)
gravity(Gravity.focusOn(FocusOn.face()))
})}.generate()
200x200 filled with face detection

To create a 200x200 thumbnail focused on the face of the woman, select the thumb crop mode and face gravity:

Ruby:
Copy to clipboard
cl_image_tag("butterfly.jpg", :gravity=>"face", :height=>200, :width=>200, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("butterfly.jpg", array("gravity"=>"face", "height"=>200, "width"=>200, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('butterfly.jpg'))
  ->resize(Resize::thumbnail()->width(200)->height(200)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("butterfly.jpg").image(gravity="face", height=200, width=200, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("butterfly.jpg", {gravity: "face", height: 200, width: 200, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").height(200).width(200).crop("thumb")).imageTag("butterfly.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('butterfly.jpg', {gravity: "face", height: 200, width: 200, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("butterfly.jpg", {gravity: "face", height: 200, width: 200, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="butterfly.jpg" >
  <Transformation gravity="face" height="200" width="200" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="butterfly.jpg" >
  <cld-transformation gravity="face" height="200" width="200" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="butterfly.jpg" >
  <cl-transformation gravity="face" height="200" width="200" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(200).Width(200).Crop("thumb")).BuildImageTag("butterfly.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(200).setWidth(200).setCrop("thumb")).generate("butterfly.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").height(200).width(200).crop("thumb")).generate("butterfly.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("butterfly.jpg")
resize(Resize.thumbnail() {
width(200)
height(200)
gravity(Gravity.focusOn(FocusOn.face()))
})}.generate()
90x90 thumb focused on the face of the woman

You can also automatically crop exactly to the region determined by the face-detection mechanism without defining resize dimensions for the original image. The following example uses the crop mode together with face gravity for cropping the original image to the face of the woman:

Ruby:
Copy to clipboard
cl_image_tag("butterfly.jpg", :gravity=>"face", :crop=>"crop")
PHP v1:
Copy to clipboard
cl_image_tag("butterfly.jpg", array("gravity"=>"face", "crop"=>"crop"))
PHP v2:
Copy to clipboard
(new ImageTag('butterfly.jpg'))
  ->resize(Resize::crop()
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("butterfly.jpg").image(gravity="face", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("butterfly.jpg", {gravity: "face", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").crop("crop")).imageTag("butterfly.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('butterfly.jpg', {gravity: "face", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("butterfly.jpg", {gravity: "face", crop: "crop"})
React:
Copy to clipboard
<Image publicId="butterfly.jpg" >
  <Transformation gravity="face" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="butterfly.jpg" >
  <cld-transformation gravity="face" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="butterfly.jpg" >
  <cl-transformation gravity="face" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Crop("crop")).BuildImageTag("butterfly.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setCrop("crop")).generate("butterfly.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").crop("crop")).generate("butterfly.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("butterfly.jpg")
resize(Resize.crop() {
gravity(Gravity.focusOn(FocusOn.face()))
})}.generate()
90x90 cropped to the face of the woman

For examples with multiple faces, the following image, showing a nice couple, was uploaded to Cloudinary:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("couple.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('couple.jpg'));
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg")
React:
Copy to clipboard
<Image publicId="couple.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("couple.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("couple.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().generate("couple.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("couple.jpg")
}.generate()
couple.jpg uploaded to Cloudinary

You can specify the thumb crop mode and face gravity to create a 150x150 thumbnail centered specifically on the largest face in the image:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :gravity=>"face", :height=>150, :width=>150, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("couple.jpg", array("gravity"=>"face", "height"=>150, "width"=>150, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('couple.jpg'))
  ->resize(Resize::thumbnail()->width(150)->height(150)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(gravity="face", height=150, width=150, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {gravity: "face", height: 150, width: 150, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").height(150).width(150).crop("thumb")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {gravity: "face", height: 150, width: 150, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {gravity: "face", height: 150, width: 150, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation gravity="face" height="150" width="150" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation gravity="face" height="150" width="150" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation gravity="face" height="150" width="150" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(150).Width(150).Crop("thumb")).BuildImageTag("couple.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(150).setWidth(150).setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").height(150).width(150).crop("thumb")).generate("couple.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("couple.jpg")
resize(Resize.thumbnail() {
width(150)
height(150)
gravity(Gravity.focusOn(FocusOn.face()))
})}.generate()
150x150 thumb focused on the biggest face in the image

To create a thumbnail focusing on all faces in the image, specify faces as the gravity instead of face:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :gravity=>"faces", :height=>135, :width=>115, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("couple.jpg", array("gravity"=>"faces", "height"=>135, "width"=>115, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('couple.jpg'))
  ->resize(Resize::thumbnail()->width(115)->height(135)
    ->gravity(Gravity::focusOn(FocusOn::faces())));
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(gravity="faces", height=135, width=115, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {gravity: "faces", height: 135, width: 115, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("faces").height(135).width(115).crop("thumb")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {gravity: "faces", height: 135, width: 115, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {gravity: "faces", height: 135, width: 115, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation gravity="faces" height="135" width="115" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation gravity="faces" height="135" width="115" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation gravity="faces" height="135" width="115" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("faces").Height(135).Width(115).Crop("thumb")).BuildImageTag("couple.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("faces").setHeight(135).setWidth(115).setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("faces").height(135).width(115).crop("thumb")).generate("couple.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("couple.jpg")
resize(Resize.thumbnail() {
width(115)
height(135)
gravity(Gravity.focusOn(FocusOn.faces()))
})}.generate()
thumb focused on all faces in the image

You can also use the fill cropping mode together with faces gravity to correctly fill an image with your desired dimensions:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :gravity=>"faces", :height=>150, :width=>100, :crop=>"fill")
PHP v1:
Copy to clipboard
cl_image_tag("couple.jpg", array("gravity"=>"faces", "height"=>150, "width"=>100, "crop"=>"fill"))
PHP v2:
Copy to clipboard
(new ImageTag('couple.jpg'))
  ->resize(Resize::fill()->width(100)->height(150)
    ->gravity(Gravity::focusOn(FocusOn::faces())));
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(gravity="faces", height=150, width=100, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {gravity: "faces", height: 150, width: 100, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("faces").height(150).width(100).crop("fill")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {gravity: "faces", height: 150, width: 100, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {gravity: "faces", height: 150, width: 100, crop: "fill"})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation gravity="faces" height="150" width="100" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation gravity="faces" height="150" width="100" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation gravity="faces" height="150" width="100" crop="fill">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("faces").Height(150).Width(100).Crop("fill")).BuildImageTag("couple.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("faces").setHeight(150).setWidth(100).setCrop("fill")).generate("couple.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("faces").height(150).width(100).crop("fill")).generate("couple.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("couple.jpg")
resize(Resize.fill() {
width(100)
height(150)
gravity(Gravity.focusOn(FocusOn.faces()))
})}.generate()
60x150 filled to include all faces in the image

Position overlays on detected faces

To automatically position an overlay over the detected face(s) in an image, set the gravity parameter to one of the following values:

  • face - places an overlay over the single largest face in the image (g_face for URLs).
  • faces - places an overlay over each of the faces in the image (g_faces for URLs).

For example, adding an overlay of the golden_star image over both of the faces detected in the young_couple2 image, where each star is resized to the same width as the detected face with the region_relative flag:

Ruby:
Copy to clipboard
cl_image_tag("young_couple2.jpg", :transformation=>[
  {:overlay=>"golden_star"},
  {:flags=>"region_relative", :width=>1.0, :crop=>"scale"},
  {:flags=>"layer_apply", :gravity=>"faces"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("young_couple2.jpg", array("transformation"=>array(
  array("overlay"=>"golden_star"),
  array("flags"=>"region_relative", "width"=>"1.0", "crop"=>"scale"),
  array("flags"=>"layer_apply", "gravity"=>"faces")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('young_couple2.jpg'))
  ->overlay(
      Overlay::source(Source::image('golden_star')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(1.0)->regionRelative())))
      ->position((new Position())
        ->gravity(Gravity::focusOn(FocusOn::faces()))
  ));
Python:
Copy to clipboard
CloudinaryImage("young_couple2.jpg").image(transformation=[
  {'overlay': "golden_star"},
  {'flags': "region_relative", 'width': "1.0", 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "faces"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("young_couple2.jpg", {transformation: [
  {overlay: "golden_star"},
  {flags: "region_relative", width: "1.0", crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("golden_star")).chain()
  .flags("region_relative").width(1.0).crop("scale").chain()
  .flags("layer_apply").gravity("faces")).imageTag("young_couple2.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('young_couple2.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("golden_star")},
  {flags: "region_relative", width: "1.0", crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("young_couple2.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("golden_star")},
  {flags: "region_relative", width: "1.0", crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]})
React:
Copy to clipboard
<Image publicId="young_couple2.jpg" >
  <Transformation overlay="golden_star" />
  <Transformation flags="region_relative" width="1.0" crop="scale" />
  <Transformation flags="layer_apply" gravity="faces" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="young_couple2.jpg" >
  <cld-transformation :overlay="golden_star" />
  <cld-transformation flags="region_relative" width="1.0" crop="scale" />
  <cld-transformation flags="layer_apply" gravity="faces" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="young_couple2.jpg" >
  <cl-transformation overlay="golden_star">
  </cl-transformation>
  <cl-transformation flags="region_relative" width="1.0" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="faces">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("golden_star")).Chain()
  .Flags("region_relative").Width(1.0).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("faces")).BuildImageTag("young_couple2.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("golden_star").chain()
  .setFlags("region_relative").setWidth(1.0).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("faces")).generate("young_couple2.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("golden_star")).chain()
  .flags("region_relative").width(1.0).crop("scale").chain()
  .flags("layer_apply").gravity("faces")).generate("young_couple2.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("young_couple2.jpg")
overlay(Overlay.source(Source.image("golden_star") {
transformation(ImageTransformation {
resize(Resize.scale() {
width(1.0f)
regionRelative()
})
})
}) {
position(Position {
gravity(Gravity.focusOn(FocusOn.faces()))
})
})}.generate()
Image with overlay placed over faces

Note
When gravity is set to one of the facial detection values and no face is detected in the image, then no overlay is placed at all.

Returning the coordinates of facial landmarks

You can use the getinfo flag together with a face-detection gravity option to return the coordinates of facial landmarks via a completely client-side operation. Using this information, you can, for example, calculate the x and y offsets to specify the exact position of an overlay on a face, or you could pass the data back to other functions in your application.

For example, you can get the facial landmark coordinates in this image by using the getinfo flag together with a crop and a gravity option that detects a face. In this example we have used g_face, but we could have also used g_auto:face, or even just g_auto (as the g_auto default behavior is to apply g_auto:faces).

Plain face

Ruby:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", :transformation=>[
  {:gravity=>"face", :width=>500, :crop=>"thumb"},
  {:flags=>"getinfo"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", array("transformation"=>array(
  array("gravity"=>"face", "width"=>500, "crop"=>"thumb"),
  array("flags"=>"getinfo")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('docs/plain_face.jpg'))
  ->resize(Resize::thumbnail()->width(500)->gravity(Gravity::focusOn(FocusOn::face())))
  ->addFlag(Flag::getInfo());
Python:
Copy to clipboard
CloudinaryImage("docs/plain_face.jpg").image(transformation=[
  {'gravity': "face", 'width': 500, 'crop': "thumb"},
  {'flags': "getinfo"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("docs/plain_face.jpg", {transformation: [
  {gravity: "face", width: 500, crop: "thumb"},
  {flags: "getinfo"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .gravity("face").width(500).crop("thumb").chain()
  .flags("getinfo")).imageTag("docs/plain_face.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('docs/plain_face.jpg', {transformation: [
  {gravity: "face", width: 500, crop: "thumb"},
  {flags: "getinfo"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/plain_face.jpg", {transformation: [
  {gravity: "face", width: 500, crop: "thumb"},
  {flags: "getinfo"}
  ]})
React:
Copy to clipboard
<Image publicId="docs/plain_face.jpg" >
  <Transformation gravity="face" width="500" crop="thumb" />
  <Transformation flags="getinfo" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="docs/plain_face.jpg" >
  <cld-transformation gravity="face" width="500" crop="thumb" />
  <cld-transformation flags="getinfo" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/plain_face.jpg" >
  <cl-transformation gravity="face" width="500" crop="thumb">
  </cl-transformation>
  <cl-transformation flags="getinfo">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Width(500).Crop("thumb").Chain()
  .Flags("getinfo")).BuildImageTag("docs/plain_face.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setWidth(500).setCrop("thumb").chain()
  .setFlags("getinfo")).generate("docs/plain_face.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").width(500).crop("thumb").chain()
  .flags("getinfo")).generate("docs/plain_face.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("docs/plain_face.jpg")
resize(Resize.thumbnail() {
width(500)
gravity(Gravity.focusOn(FocusOn.face()))
})
addFlag(Flag.getInfo())}.generate()

This returns:

Copy to clipboard
{
  "input": {
    "width": 640,
    "height": 426,
    "bytes": 49727
  },
  "landmarks": [
    [
      {
        "face_center": {
          "x": 402,
          "y": 218
        },
        "l_canthus_r_eye": {
          "x": 371,
          "y": 176
        },
        "r_canthus_l_eye": {
          "x": 421,
          "y": 177
        },
        "mouth_r": {
          "x": 365,
          "y": 254
        },
        "mouth_l": {
          "x": 425,
          "y": 256
        },
        "r_canthus_r_eye": {
          "x": 333,
          "y": 170
        },
        "l_canthus_l_eye": {
          "x": 457,
          "y": 174
        },
        "nose_tip": {
          "x": 399,
          "y": 224
        },
        "l_eyebrow_l": {
          "x": 465,
          "y": 151
        },
        "l_eyebrow_c": {
          "x": 444,
          "y": 151
        },
        "l_eyebrow_r": {
          "x": 418,
          "y": 158
        },
        "r_eyebrow_l": {
          "x": 376,
          "y": 158
        },
        "r_eyebrow_c": {
          "x": 350,
          "y": 151
        },
        "r_eyebrow_r": {
          "x": 324,
          "y": 158
        },
        "nose_root": {
          "x": 397,
          "y": 172
        },
        "nose_l": {
          "x": 413,
          "y": 220
        },
        "nose_r": {
          "x": 376,
          "y": 220
        },
        "mouth_t": {
          "x": 397,
          "y": 247
        },
        "mouth_b": {
          "x": 397,
          "y": 268
        },
        "chin": {
          "x": 392,
          "y": 302
        },
        "forehead_apex": {
          "x": 400,
          "y": 100
        }
      }
    ]
  ],
  "resize": [
    {
      "x": 140,
      "y": 34,
      "width": 500,
      "height": 333
    }
  ],
  "output": {
    "format": "jpg",
    "bytes": 49255,
    "width": 500,
    "height": 333
  }
}

The coordinates of the landmarks are relative to the top left of the original image. You can use this data to position an overlay with a gravity of north_west using the relevant returned coordinates as the x and y offsets. Specifying an offset of 0,0 positions an overlay with its top left corner in the 0,0 position of the base image, so if you want to center the overlay on a particular coordinate, you need to adjust the coordinates by half of the width and height of the overlay.

For example, to position a golden star, resized to a width and height of 20 pixels, centered over the right side of the right eyebrow, take the coordinates of "r_eyebrow_r":{"x":324,"y":158} and subtract half the width and height of the overlay (10 pixels) to leave an x-offset of 314 and a y-offset of 148.

Putting all these parameters together you can give the girl an eyebrow piercing overlay as follows:

Ruby:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", :transformation=>[
  {:overlay=>"golden_star"},
  {:width=>20, :crop=>"scale"},
  {:flags=>"layer_apply", :gravity=>"north_west", :x=>314, :y=>148},
  {:width=>500, :crop=>"scale"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", array("transformation"=>array(
  array("overlay"=>"golden_star"),
  array("width"=>20, "crop"=>"scale"),
  array("flags"=>"layer_apply", "gravity"=>"north_west", "x"=>314, "y"=>148),
  array("width"=>500, "crop"=>"scale")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('docs/plain_face.jpg'))
  ->overlay(
      Overlay::source(Source::image('golden_star')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(20))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::northWest()))
        ->offsetX(314)->offsetY(148)))
    ->resize(Resize::scale()->width(500));
Python:
Copy to clipboard
CloudinaryImage("docs/plain_face.jpg").image(transformation=[
  {'overlay': "golden_star"},
  {'width': 20, 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 314, 'y': 148},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("docs/plain_face.jpg", {transformation: [
  {overlay: "golden_star"},
  {width: 20, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 314, y: 148},
  {width: 500, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("golden_star")).chain()
  .width(20).crop("scale").chain()
  .flags("layer_apply").gravity("north_west").x(314).y(148).chain()
  .width(500).crop("scale")).imageTag("docs/plain_face.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('docs/plain_face.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("golden_star")},
  {width: 20, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 314, y: 148},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/plain_face.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("golden_star")},
  {width: 20, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 314, y: 148},
  {width: 500, crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="docs/plain_face.jpg" >
  <Transformation overlay="golden_star" />
  <Transformation width="20" crop="scale" />
  <Transformation flags="layer_apply" gravity="north_west" x="314" y="148" />
  <Transformation width="500" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="docs/plain_face.jpg" >
  <cld-transformation :overlay="golden_star" />
  <cld-transformation width="20" crop="scale" />
  <cld-transformation flags="layer_apply" gravity="north_west" x="314" y="148" />
  <cld-transformation width="500" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/plain_face.jpg" >
  <cl-transformation overlay="golden_star">
  </cl-transformation>
  <cl-transformation width="20" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_west" x="314" y="148">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("golden_star")).Chain()
  .Width(20).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("north_west").X(314).Y(148).Chain()
  .Width(500).Crop("scale")).BuildImageTag("docs/plain_face.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("golden_star").chain()
  .setWidth(20).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("north_west").setX(314).setY(148).chain()
  .setWidth(500).setCrop("scale")).generate("docs/plain_face.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("golden_star")).chain()
  .width(20).crop("scale").chain()
  .flags("layer_apply").gravity("north_west").x(314).y(148).chain()
  .width(500).crop("scale")).generate("docs/plain_face.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("docs/plain_face.jpg")
overlay(Overlay.source(Source.image("golden_star") {
transformation(ImageTransformation {
resize(Resize.scale() {
width(20)
})
})
}) {
position(Position {
gravity(Gravity.compass(Compass.northWest()))
offsetX(314)
offsetY(148)
})
})
resize(Resize.scale() {
width(500)
})}.generate()
Right eyebrow piercing

Position overlays avoiding detected faces

You may want to detect a face to avoid positioning an overlay on it. In this case, you can use g_auto:face_avoid together with the getinfo flag to find the area of the image that is least likely to include a face. Then, use these coordinates when adding the overlay.

For example, start with a URL that gets information about the part of the image to avoid:

Ruby:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", :transformation=>[
  {:gravity=>"auto:face_avoid", :width=>300, :crop=>"thumb"},
  {:flags=>"getinfo"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", array("transformation"=>array(
  array("gravity"=>"auto:face_avoid", "width"=>300, "crop"=>"thumb"),
  array("flags"=>"getinfo")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('docs/plain_face.jpg'))
  ->resize(Resize::thumbnail()->width(300)
    ->gravity(Gravity::autoGravity()
      ->autoFocus(AutoFocus::focusOn(FocusOn::face())
        ->avoid(true))))
  ->addFlag(Flag::getInfo());
Python:
Copy to clipboard
CloudinaryImage("docs/plain_face.jpg").image(transformation=[
  {'gravity': "auto:face_avoid", 'width': 300, 'crop': "thumb"},
  {'flags': "getinfo"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("docs/plain_face.jpg", {transformation: [
  {gravity: "auto:face_avoid", width: 300, crop: "thumb"},
  {flags: "getinfo"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .gravity("auto:face_avoid").width(300).crop("thumb").chain()
  .flags("getinfo")).imageTag("docs/plain_face.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('docs/plain_face.jpg', {transformation: [
  {gravity: "auto:face_avoid", width: 300, crop: "thumb"},
  {flags: "getinfo"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/plain_face.jpg", {transformation: [
  {gravity: "auto:face_avoid", width: 300, crop: "thumb"},
  {flags: "getinfo"}
  ]})
React:
Copy to clipboard
<Image publicId="docs/plain_face.jpg" >
  <Transformation gravity="auto:face_avoid" width="300" crop="thumb" />
  <Transformation flags="getinfo" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="docs/plain_face.jpg" >
  <cld-transformation gravity="auto:face_avoid" width="300" crop="thumb" />
  <cld-transformation flags="getinfo" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/plain_face.jpg" >
  <cl-transformation gravity="auto:face_avoid" width="300" crop="thumb">
  </cl-transformation>
  <cl-transformation flags="getinfo">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("auto:face_avoid").Width(300).Crop("thumb").Chain()
  .Flags("getinfo")).BuildImageTag("docs/plain_face.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("auto:face_avoid").setWidth(300).setCrop("thumb").chain()
  .setFlags("getinfo")).generate("docs/plain_face.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .gravity("auto:face_avoid").width(300).crop("thumb").chain()
  .flags("getinfo")).generate("docs/plain_face.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("docs/plain_face.jpg")
resize(Resize.thumbnail() {
width(300)
gravity(Gravity.autoGravity() {
autoFocus(AutoFocus.focusOn(FocusOn.face()) {
avoid()
})
})
})
addFlag(Flag.getInfo())}.generate()

The best area to focus on (avoiding the face) is given in the returned g_auto_info key:

Copy to clipboard
"g_auto_info":[{"x":0,"y":208,"width":318,"height":211}]

You can use this information to position your overlay. Here, the text overlay is positioned with a slight offset from the returned x-coordinate (5px, rather than 0px), and is resized to fit the returned area accordingly (in this case 313px x 211px to take into account the 5px offset):

Ruby:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", :transformation=>[
  {:color=>"#FFFF00", :height=>211, :overlay=>{:font_family=>"Times", :font_size=>36, :font_weight=>"bold", :text=>"Unleash%2520the%2520full%2520potential%2520of%2520your%2520media"}, :width=>313, :crop=>"fit"},
  {:flags=>"layer_apply", :gravity=>"north_west", :x=>5, :y=>208}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("docs/plain_face.jpg", array("transformation"=>array(
  array("color"=>"#FFFF00", "height"=>211, "overlay"=>array("font_family"=>"Times", "font_size"=>36, "font_weight"=>"bold", "text"=>"Unleash%2520the%2520full%2520potential%2520of%2520your%2520media"), "width"=>313, "crop"=>"fit"),
  array("flags"=>"layer_apply", "gravity"=>"north_west", "x"=>5, "y"=>208)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('docs/plain_face.jpg'))
  ->overlay(
      Overlay::source(
          Source::text('Unleash%20the%20full%20potential%20of%20your%20media', (new TextStyle('Times', 36))
            ->fontWeight(FontWeight::bold()))
          ->textColor(Color::rgb('FFFF00'))
          ->transformation((new ImageTransformation())
            ->resize(Resize::fit()->width(313)->height(211))))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::northWest()))
          ->offsetX(5)->offsetY(208)
      
      ));
Python:
Copy to clipboard
CloudinaryImage("docs/plain_face.jpg").image(transformation=[
  {'color': "#FFFF00", 'height': 211, 'overlay': {'font_family': "Times", 'font_size': 36, 'font_weight': "bold", 'text': "Unleash%2520the%2520full%2520potential%2520of%2520your%2520media"}, 'width': 313, 'crop': "fit"},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 5, 'y': 208}
  ])
Node.js:
Copy to clipboard
cloudinary.image("docs/plain_face.jpg", {transformation: [
  {color: "#FFFF00", height: 211, overlay: {font_family: "Times", font_size: 36, font_weight: "bold", text: "Unleash%2520the%2520full%2520potential%2520of%2520your%2520media"}, width: 313, crop: "fit"},
  {flags: "layer_apply", gravity: "north_west", x: 5, y: 208}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .color("#FFFF00").height(211).overlay(new TextLayer().fontFamily("Times").fontSize(36).fontWeight("bold").text("Unleash%2520the%2520full%2520potential%2520of%2520your%2520media")).width(313).crop("fit").chain()
  .flags("layer_apply").gravity("north_west").x(5).y(208)).imageTag("docs/plain_face.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('docs/plain_face.jpg', {transformation: [
  {color: "#FFFF00", height: 211, overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(36).fontWeight("bold").text("Unleash%2520the%2520full%2520potential%2520of%2520your%2520media"), width: 313, crop: "fit"},
  {flags: "layer_apply", gravity: "north_west", x: 5, y: 208}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/plain_face.jpg", {transformation: [
  {color: "#FFFF00", height: 211, overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(36).fontWeight("bold").text("Unleash%2520the%2520full%2520potential%2520of%2520your%2520media"), width: 313, crop: "fit"},
  {flags: "layer_apply", gravity: "north_west", x: 5, y: 208}
  ]})
React:
Copy to clipboard
<Image publicId="docs/plain_face.jpg" >
  <Transformation color="#FFFF00" height="211" overlay={{fontFamily: "Times", fontSize: 36, fontWeight: "bold", text: "Unleash%2520the%2520full%2520potential%2520of%2520your%2520media"}} width="313" crop="fit" />
  <Transformation flags="layer_apply" gravity="north_west" x="5" y="208" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="docs/plain_face.jpg" >
  <cld-transformation color="#FFFF00" height="211" :overlay="{fontFamily: 'Times', fontSize: 36, fontWeight: 'bold', text: 'Unleash%2520the%2520full%2520potential%2520of%2520your%2520media'}" width="313" crop="fit" />
  <cld-transformation flags="layer_apply" gravity="north_west" x="5" y="208" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/plain_face.jpg" >
  <cl-transformation color="#FFFF00" height="211" overlay="text:Times_36_bold:Unleash%2520the%2520full%2520potential%2520of%2520your%2520media" width="313" crop="fit">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_west" x="5" y="208">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Color("#FFFF00").Height(211).Overlay(new TextLayer().FontFamily("Times").FontSize(36).FontWeight("bold").Text("Unleash%2520the%2520full%2520potential%2520of%2520your%2520media")).Width(313).Crop("fit").Chain()
  .Flags("layer_apply").Gravity("north_west").X(5).Y(208)).BuildImageTag("docs/plain_face.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setColor("#FFFF00").setHeight(211).setOverlay("text:Times_36_bold:Unleash%2520the%2520full%2520potential%2520of%2520your%2520media").setWidth(313).setCrop("fit").chain()
  .setFlags("layer_apply").setGravity("north_west").setX(5).setY(208)).generate("docs/plain_face.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .color("#FFFF00").height(211).overlay(new TextLayer().fontFamily("Times").fontSize(36).fontWeight("bold").text("Unleash%2520the%2520full%2520potential%2520of%2520your%2520media")).width(313).crop("fit").chain()
  .flags("layer_apply").gravity("north_west").x(5).y(208)).generate("docs/plain_face.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("docs/plain_face.jpg")
overlay(Overlay.source(Source.text("Unleash%20the%20full%20potential%20of%20your%20media", TextStyle("Times", 36) {
fontWeight(FontWeight.bold())
}) {
textColor(Color.rgb("#FFFF00"))
transformation(ImageTransformation {
resize(Resize.fit() {
width(313)
height(211)
})
})
}) {
position(Position {
gravity(Gravity.compass(Compass.northWest()))
offsetX(5)
offsetY(208)
})
})}.generate()
Text overlay avoiding the girl's face

Effects with face detection

To apply a blur or pixelation effect to the automatically detected faces in an image, use the effect parameter and set it to one of the following values:

  • blur_faces - Automatically blur all detected faces in the image: the strength of the blur effect is determined by an optional extra value (Range: 1 to 2000, Default: 500). For example, e_blur_faces:100 uses a mild blur effect with a strength of 100.
  • pixelate_faces - Automatically pixelate all detected faces in the image. The width of the pixelation squares is determined by an optional extra value (Range: 1 to 200, Default: 5). For example, e_pixelate_faces:3 uses pixelation squares 3 pixels wide.

For example, to automatically pixelate both of the faces detected in the young_couple2 image with pixelation squares 9 pixels wide:

Ruby:
Copy to clipboard
cl_image_tag("young_couple2.jpg", :effect=>"pixelate_faces:9")
PHP v1:
Copy to clipboard
cl_image_tag("young_couple2.jpg", array("effect"=>"pixelate_faces:9"))
PHP v2:
Copy to clipboard
(new ImageTag('young_couple2.jpg'))
  ->effect(Effect::pixelate()->squareSize(9)
    ->region(Region::faces()));
Python:
Copy to clipboard
CloudinaryImage("young_couple2.jpg").image(effect="pixelate_faces:9")
Node.js:
Copy to clipboard
cloudinary.image("young_couple2.jpg", {effect: "pixelate_faces:9"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate_faces:9")).imageTag("young_couple2.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('young_couple2.jpg', {effect: "pixelate_faces:9"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("young_couple2.jpg", {effect: "pixelate_faces:9"})
React:
Copy to clipboard
<Image publicId="young_couple2.jpg" >
  <Transformation effect="pixelate_faces:9" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="young_couple2.jpg" >
  <cld-transformation effect="pixelate_faces:9" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="young_couple2.jpg" >
  <cl-transformation effect="pixelate_faces:9">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_faces:9")).BuildImageTag("young_couple2.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("pixelate_faces:9")).generate("young_couple2.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate_faces:9")).generate("young_couple2.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("young_couple2.jpg")
effect(Effect.pixelate() {
squareSize(9)
region(Region.faces())
})}.generate()
Image with faces blurred

Advanced facial attributes detection

With the Advanced Facial Attributes Detection add-on, you can extend the Cloudinary built-in features that involve semantic photo data extraction, image cropping and the positioning of image overlays. When using the add-on, your images are further processed and additional advanced face attributes are automatically extracted. Cloudinary can then use these additional details to smartly crop, position, rotate and overlay images according to the position of the detected faces or eyes.

The advanced facial detection is applied by setting the gravity parameter to one of the following values:

  • adv_face - detects the single largest face in the image (g_adv_face for URLs).
  • adv_faces - detects all of the faces in the image (g_adv_faces for URLs).
  • adv_eyes - detects all the pairs of eyes in the image (g_adv_eyes for URLs).

For example, to automatically overlay the image glasses over the detected eyes in the couple image. The glasses are resized to 170% the width of the detected eyes by adding the region_relative flag:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :transformation=>[
  {:overlay=>"glasses"},
  {:flags=>"region_relative", :width=>1.7, :crop=>"scale"},
  {:flags=>"layer_apply", :gravity=>"adv_eyes"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("couple.jpg", array("transformation"=>array(
  array("overlay"=>"glasses"),
  array("flags"=>"region_relative", "width"=>"1.7", "crop"=>"scale"),
  array("flags"=>"layer_apply", "gravity"=>"adv_eyes")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('couple.jpg'))
  ->overlay(
      Overlay::source(Source::image('glasses')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(1.7)->regionRelative())))
      ->position((new Position())
        ->gravity(Gravity::focusOn(FocusOn::advancedEyes()))
  ));
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(transformation=[
  {'overlay': "glasses"},
  {'flags': "region_relative", 'width': "1.7", 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "adv_eyes"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {transformation: [
  {overlay: "glasses"},
  {flags: "region_relative", width: "1.7", crop: "scale"},
  {flags: "layer_apply", gravity: "adv_eyes"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("glasses")).chain()
  .flags("region_relative").width(1.7).crop("scale").chain()
  .flags("layer_apply").gravity("adv_eyes")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("glasses")},
  {flags: "region_relative", width: "1.7", crop: "scale"},
  {flags: "layer_apply", gravity: "adv_eyes"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("glasses")},
  {flags: "region_relative", width: "1.7", crop: "scale"},
  {flags: "layer_apply", gravity: "adv_eyes"}
  ]})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation overlay="glasses" />
  <Transformation flags="region_relative" width="1.7" crop="scale" />
  <Transformation flags="layer_apply" gravity="adv_eyes" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation :overlay="glasses" />
  <cld-transformation flags="region_relative" width="1.7" crop="scale" />
  <cld-transformation flags="layer_apply" gravity="adv_eyes" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation overlay="glasses">
  </cl-transformation>
  <cl-transformation flags="region_relative" width="1.7" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="adv_eyes">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("glasses")).Chain()
  .Flags("region_relative").Width(1.7).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("adv_eyes")).BuildImageTag("couple.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("glasses").chain()
  .setFlags("region_relative").setWidth(1.7).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("adv_eyes")).generate("couple.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("glasses")).chain()
  .flags("region_relative").width(1.7).crop("scale").chain()
  .flags("layer_apply").gravity("adv_eyes")).generate("couple.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("couple.jpg")
overlay(Overlay.source(Source.image("glasses") {
transformation(ImageTransformation {
resize(Resize.scale() {
width(1.7f)
regionRelative()
})
})
}) {
position(Position {
gravity(Gravity.focusOn(FocusOn.advancedEyes()))
})
})}.generate()
Automatically placed glasses on detected faces

See the Advanced Facial Attributes Detection documentation for more information and examples on using the add-on.

Zoom level

When using either the crop or thumb cropping modes and setting the gravity parameter to one of the face-detection values, the resulting image is delivered at a default zoom level. To control how much of the original image surrounding the face to keep, use the zoom parameter (z for URLs). This parameter accepts a decimal value that sets the new zoom level as a multiplier of the default zoom setting: a value less than 1.0 zooms out and a value greater than 1.0 zooms in. For example, z_0.5 halves the default zoom to 50% and zooms out to include more of the background around the face, while z_2.0 doubles the default zoom to 200% and zooms in to include less of the background around the face.

Examples with the uploaded image called woman:

  • Original image (scaled down):
    Ruby:
    Copy to clipboard
    cl_image_tag("woman.jpg")
    PHP v1:
    Copy to clipboard
    cl_image_tag("woman.jpg")
    PHP v2:
    Copy to clipboard
    (new ImageTag('woman.jpg'));
    Python:
    Copy to clipboard
    CloudinaryImage("woman.jpg").image()
    Node.js:
    Copy to clipboard
    cloudinary.image("woman.jpg")
    Java:
    Copy to clipboard
    cloudinary.url().imageTag("woman.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('woman.jpg').toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("woman.jpg")
    React:
    Copy to clipboard
    <Image publicId="woman.jpg" >
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="woman.jpg" >
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="woman.jpg" >
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.BuildImageTag("woman.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().generate("woman.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().generate("woman.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("woman.jpg")
    }.generate()
    Original image
  • Cropped with face detection and default zoom:
    Ruby:
    Copy to clipboard
    cl_image_tag("woman.jpg", :gravity=>"face", :crop=>"crop")
    PHP v1:
    Copy to clipboard
    cl_image_tag("woman.jpg", array("gravity"=>"face", "crop"=>"crop"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('woman.jpg'))
      ->resize(Resize::crop()
        ->gravity(Gravity::focusOn(FocusOn::face())));
    Python:
    Copy to clipboard
    CloudinaryImage("woman.jpg").image(gravity="face", crop="crop")
    Node.js:
    Copy to clipboard
    cloudinary.image("woman.jpg", {gravity: "face", crop: "crop"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().gravity("face").crop("crop")).imageTag("woman.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('woman.jpg', {gravity: "face", crop: "crop"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("woman.jpg", {gravity: "face", crop: "crop"})
    React:
    Copy to clipboard
    <Image publicId="woman.jpg" >
      <Transformation gravity="face" crop="crop" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="woman.jpg" >
      <cld-transformation gravity="face" crop="crop" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="woman.jpg" >
      <cl-transformation gravity="face" crop="crop">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Crop("crop")).BuildImageTag("woman.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().gravity("face").crop("crop")).generate("woman.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("woman.jpg")
    resize(Resize.crop() {
    gravity(Gravity.focusOn(FocusOn.face()))
    })}.generate()
    Cropped with face detection and default zoom
  • Cropped with face detection and zoom set to 130%:
    Ruby:
    Copy to clipboard
    cl_image_tag("woman.jpg", :gravity=>"face", :zoom=>1.3, :crop=>"crop")
    PHP v1:
    Copy to clipboard
    cl_image_tag("woman.jpg", array("gravity"=>"face", "zoom"=>"1.3", "crop"=>"crop"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('woman.jpg'))
      ->resize(Resize::crop()->zoom(1.3)
        ->gravity(Gravity::focusOn(FocusOn::face())));
    Python:
    Copy to clipboard
    CloudinaryImage("woman.jpg").image(gravity="face", zoom="1.3", crop="crop")
    Node.js:
    Copy to clipboard
    cloudinary.image("woman.jpg", {gravity: "face", zoom: "1.3", crop: "crop"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().gravity("face").zoom(1.3).crop("crop")).imageTag("woman.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('woman.jpg', {gravity: "face", zoom: "1.3", crop: "crop"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("woman.jpg", {gravity: "face", zoom: "1.3", crop: "crop"})
    React:
    Copy to clipboard
    <Image publicId="woman.jpg" >
      <Transformation gravity="face" zoom="1.3" crop="crop" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="woman.jpg" >
      <cld-transformation gravity="face" zoom="1.3" crop="crop" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="woman.jpg" >
      <cl-transformation gravity="face" zoom="1.3" crop="crop">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Zoom(1.3).Crop("crop")).BuildImageTag("woman.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setZoom(1.3).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().gravity("face").zoom(1.3).crop("crop")).generate("woman.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("woman.jpg")
    resize(Resize.crop() {
    zoom(1.3f)
    gravity(Gravity.focusOn(FocusOn.face()))
    })}.generate()
    Cropped with face detection and zoom set to 120%
  • 150x150 thumbnail with face detection and default zoom:
    Ruby:
    Copy to clipboard
    cl_image_tag("woman.jpg", :gravity=>"face", :height=>150, :width=>150, :crop=>"thumb")
    PHP v1:
    Copy to clipboard
    cl_image_tag("woman.jpg", array("gravity"=>"face", "height"=>150, "width"=>150, "crop"=>"thumb"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('woman.jpg'))
      ->resize(Resize::thumbnail()->width(150)->height(150)
        ->gravity(Gravity::focusOn(FocusOn::face())));
    Python:
    Copy to clipboard
    CloudinaryImage("woman.jpg").image(gravity="face", height=150, width=150, crop="thumb")
    Node.js:
    Copy to clipboard
    cloudinary.image("woman.jpg", {gravity: "face", height: 150, width: 150, crop: "thumb"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().gravity("face").height(150).width(150).crop("thumb")).imageTag("woman.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('woman.jpg', {gravity: "face", height: 150, width: 150, crop: "thumb"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("woman.jpg", {gravity: "face", height: 150, width: 150, crop: "thumb"})
    React:
    Copy to clipboard
    <Image publicId="woman.jpg" >
      <Transformation gravity="face" height="150" width="150" crop="thumb" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="woman.jpg" >
      <cld-transformation gravity="face" height="150" width="150" crop="thumb" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="woman.jpg" >
      <cl-transformation gravity="face" height="150" width="150" crop="thumb">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(150).Width(150).Crop("thumb")).BuildImageTag("woman.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(150).setWidth(150).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().gravity("face").height(150).width(150).crop("thumb")).generate("woman.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("woman.jpg")
    resize(Resize.thumbnail() {
    width(150)
    height(150)
    gravity(Gravity.focusOn(FocusOn.face()))
    })}.generate()
    150x150 thumbnail with face detection and default zoom
  • 150x150 thumbnail with face detection and zoom set to 70%:
    Ruby:
    Copy to clipboard
    cl_image_tag("woman.jpg", :gravity=>"face", :height=>150, :width=>150, :zoom=>0.7, :crop=>"thumb")
    PHP v1:
    Copy to clipboard
    cl_image_tag("woman.jpg", array("gravity"=>"face", "height"=>150, "width"=>150, "zoom"=>"0.7", "crop"=>"thumb"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('woman.jpg'))
      ->resize(Resize::thumbnail()->width(150)->height(150)->zoom(0.7)
        ->gravity(Gravity::focusOn(FocusOn::face())));
    Python:
    Copy to clipboard
    CloudinaryImage("woman.jpg").image(gravity="face", height=150, width=150, zoom="0.7", crop="thumb")
    Node.js:
    Copy to clipboard
    cloudinary.image("woman.jpg", {gravity: "face", height: 150, width: 150, zoom: "0.7", crop: "thumb"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().gravity("face").height(150).width(150).zoom(0.7).crop("thumb")).imageTag("woman.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('woman.jpg', {gravity: "face", height: 150, width: 150, zoom: "0.7", crop: "thumb"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("woman.jpg", {gravity: "face", height: 150, width: 150, zoom: "0.7", crop: "thumb"})
    React:
    Copy to clipboard
    <Image publicId="woman.jpg" >
      <Transformation gravity="face" height="150" width="150" zoom="0.7" crop="thumb" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="woman.jpg" >
      <cld-transformation gravity="face" height="150" width="150" zoom="0.7" crop="thumb" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="woman.jpg" >
      <cl-transformation gravity="face" height="150" width="150" zoom="0.7" crop="thumb">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(150).Width(150).Zoom(0.7).Crop("thumb")).BuildImageTag("woman.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(150).setWidth(150).setZoom(0.7).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().gravity("face").height(150).width(150).zoom(0.7).crop("thumb")).generate("woman.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("woman.jpg")
    resize(Resize.thumbnail() {
    width(150)
    height(150)
    zoom(0.7f)
    gravity(Gravity.focusOn(FocusOn.face()))
    })}.generate()
    150x150 thumbnail with face detection and default zoom

For more examples on using the zoom parameter see the article on How to control the zoom level with automatic face-detection based image cropping.

Facial recognition (open source)

Cloudinary does not provide built-in facial-recognition features. However, you can combine Cloudinary functionality with other AI technologies to address face recognition needs.

For example, the Cloudinary Solutions team built an open-source library that can learn and then auto-tag faces based on a privately maintained mapping between faces and names. This functionality could be used for internal applications, such as auto-mapping employee head shots to employee profile pages or tagging students in school event photos on a university website.

This open-source library uses an Amazon Rekognition lambda function, which is triggered by the notification webhook that's sent when photos are uploaded to a specified folder in Cloudinary, and afterwards uses Cloudinary's Amazon Rekognition Auto-Tagging add-on to automatically tag photos if they contain faces learned from that list.

This blog post walks you through the steps of using this open-source library to create your own private facial recognition auto-tagging app.

✔️ Feedback sent!

Rate this page: