Face detection-based image cropping

Crop an image based on an automatically detected face or faces by specifying the width and height (w and h in URLs), setting the gravity parameter to face or faces (g_face or g_faces in URLs), then choose the crop mode most suitable to your requirements.

With Cloudinary, cropping an image can be easily done on-the-fly in the cloud. Cloudinary can automatically detect faces' position within an image, and crop a thumbnail based on the detected face.

Here's an original image:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg")
PHP:
Copy to clipboard
cl_image_tag("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")
Android:
Copy to clipboard
MediaManager.get().url().generate("couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("couple.jpg")!, cloudinary: cloudinary)
Original

Here's a 100x100 cropped version based on the most dominant face in the image:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :width=>100, :height=>100, :gravity=>"face", :crop=>"thumb")
PHP:
Copy to clipboard
cl_image_tag("couple.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "crop"=>"thumb"))
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(width=100, height=100, gravity="face", crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {width: 100, height: 100, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation width="100" height="100" gravity="face" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation width="100" height="100" gravity="face" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation width="100" height="100" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Crop("thumb")).BuildImageTag("couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).generate("couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)
Face detection

Cloudinary also supports detecting multiple faces. For example, here's a 100x100 cropped image based on all the detected faces in the image:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :width=>100, :height=>100, :gravity=>"faces", :crop=>"thumb")
PHP:
Copy to clipboard
cl_image_tag("couple.jpg", array("width"=>100, "height"=>100, "gravity"=>"faces", "crop"=>"thumb"))
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(width=100, height=100, gravity="faces", crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "faces", crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("faces").crop("thumb")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {width: 100, height: 100, gravity: "faces", crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "faces", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation width="100" height="100" gravity="faces" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation width="100" height="100" gravity="faces" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation width="100" height="100" gravity="faces" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("faces").Crop("thumb")).BuildImageTag("couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("faces").crop("thumb")).generate("couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("faces").setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)
Faces detection

The face and faces gravity modes are supported by the crop, fill, lfill or thumb crop modes.

When using the fill crop mode, the faces gravity mode might also come very handy. For example, here's the image cropped with the fill crop mode while using the default gravity (center):

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

And here's how it looks when using faces:

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

by Itay Taragano