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:
cl_image_tag("couple.jpg")
PHP:
cl_image_tag("couple.jpg")
Python:
CloudinaryImage("couple.jpg").image()
Node.js:
cloudinary.image("couple.jpg")
Java:
cloudinary.url().imageTag("couple.jpg")
JS:
cl.imageTag('couple.jpg').toHtml();
jQuery:
$.cloudinary.image("couple.jpg")
React:
<Image publicId="couple.jpg" >

</Image>
Angular:
<cl-image public-id="couple.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("couple.jpg")
Original

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

Ruby:
cl_image_tag("couple.jpg", :width=>100, :height=>100, :gravity=>"face", :crop=>"thumb")
PHP:
cl_image_tag("couple.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "crop"=>"thumb"))
Python:
CloudinaryImage("couple.jpg").image(width=100, height=100, gravity="face", crop="thumb")
Node.js:
cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).imageTag("couple.jpg")
JS:
cl.imageTag('couple.jpg', {width: 100, height: 100, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
React:
<Image publicId="couple.jpg" >
  <Transformation width="100" height="100" gravity="face" crop="thumb" />
</Image>
Angular:
<cl-image public-id="couple.jpg" >
  <cl-transformation width="100" height="100" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Crop("thumb")).BuildImageTag("couple.jpg")
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:
cl_image_tag("couple.jpg", :width=>100, :height=>100, :gravity=>"faces", :crop=>"thumb")
PHP:
cl_image_tag("couple.jpg", array("width"=>100, "height"=>100, "gravity"=>"faces", "crop"=>"thumb"))
Python:
CloudinaryImage("couple.jpg").image(width=100, height=100, gravity="faces", crop="thumb")
Node.js:
cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "faces", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("faces").crop("thumb")).imageTag("couple.jpg")
JS:
cl.imageTag('couple.jpg', {width: 100, height: 100, gravity: "faces", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "faces", crop: "thumb"})
React:
<Image publicId="couple.jpg" >
  <Transformation width="100" height="100" gravity="faces" crop="thumb" />
</Image>
Angular:
<cl-image public-id="couple.jpg" >
  <cl-transformation width="100" height="100" gravity="faces" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("faces").Crop("thumb")).BuildImageTag("couple.jpg")
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:
cl_image_tag("couple.jpg", :width=>80, :height=>200, :crop=>"fill")
PHP:
cl_image_tag("couple.jpg", array("width"=>80, "height"=>200, "crop"=>"fill"))
Python:
CloudinaryImage("couple.jpg").image(width=80, height=200, crop="fill")
Node.js:
cloudinary.image("couple.jpg", {width: 80, height: 200, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(80).height(200).crop("fill")).imageTag("couple.jpg")
JS:
cl.imageTag('couple.jpg', {width: 80, height: 200, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("couple.jpg", {width: 80, height: 200, crop: "fill"})
React:
<Image publicId="couple.jpg" >
  <Transformation width="80" height="200" crop="fill" />
</Image>
Angular:
<cl-image public-id="couple.jpg" >
  <cl-transformation width="80" height="200" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(80).Height(200).Crop("fill")).BuildImageTag("couple.jpg")
80x200 Fit

And here's how it looks when using faces:

Ruby:
cl_image_tag("couple.jpg", :width=>80, :height=>200, :gravity=>"faces", :crop=>"fill")
PHP:
cl_image_tag("couple.jpg", array("width"=>80, "height"=>200, "gravity"=>"faces", "crop"=>"fill"))
Python:
CloudinaryImage("couple.jpg").image(width=80, height=200, gravity="faces", crop="fill")
Node.js:
cloudinary.image("couple.jpg", {width: 80, height: 200, gravity: "faces", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(80).height(200).gravity("faces").crop("fill")).imageTag("couple.jpg")
JS:
cl.imageTag('couple.jpg', {width: 80, height: 200, gravity: "faces", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("couple.jpg", {width: 80, height: 200, gravity: "faces", crop: "fill"})
React:
<Image publicId="couple.jpg" >
  <Transformation width="80" height="200" gravity="faces" crop="fill" />
</Image>
Angular:
<cl-image public-id="couple.jpg" >
  <cl-transformation width="80" height="200" gravity="faces" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(80).Height(200).Gravity("faces").Crop("fill")).BuildImageTag("couple.jpg")
80x200 Fit with Faces

by Itay Taragano