Custom shapes cropping

You can crop an image based on any custom shape. Do this by having your own custom image as a mask for cropping, setting the overlay parameter as your mask image's public ID and setting the flags parameter to cutter (in URLs: l_<mask_image>,fl_cutter).

Original

Original

Custom shaped

Custom shaped

Semi-transparency

Semi-transparency
Ruby:
cl_image_tag("pasta.png", :transformation=>[
  {:width=>173, :height=>200, :crop=>"fill"},
  {:overlay=>"hexagon_sample", :flags=>"cutter"}
  ])
PHP:
cl_image_tag("pasta.png", array("transformation"=>array(
  array("width"=>173, "height"=>200, "crop"=>"fill"),
  array("overlay"=>"hexagon_sample", "flags"=>"cutter")
  )))
Python:
CloudinaryImage("pasta.png").image(transformation=[
  {"width": 173, "height": 200, "crop": "fill"},
  {"overlay": "hexagon_sample", "flags": "cutter"}
  ])
Node.js:
cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: "hexagon_sample", flags: "cutter"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay("hexagon_sample").flags("cutter")).imageTag("pasta.png")
jQuery:
$.cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: "hexagon_sample", flags: "cutter"}
  ]})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(173).Height(200).Crop("fill").Chain()
  .Overlay("hexagon_sample").Flags("cutter")).BuildImageTag("pasta.png")
by Itay Taragano

Overlay an image over detected faces

Overlay another image of your choice on top of the faces which are automatically detected in your image. This is done by setting the overlay parameter (l in URLs) to the overlay image's public ID while setting the gravity parameter to faces (g_faces in URLs).

Original

Original

Faces overlay

Faces overlay

Funny overlay

Funny overlay
Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", :overlay=>"badge", :gravity=>"faces", :width=>30, :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", array("overlay"=>"badge", "gravity"=>"faces", "width"=>30, "type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg").image(overlay="badge", gravity="faces", width=30, type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})
Java:
cloudinary.url().transformation(new Transformation().overlay("badge").gravity("faces").width(30)).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("badge").Gravity("faces").Width(30)).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")
by Itay Taragano

Blur or pixelate faces

Hide faces in your images by telling Cloudinary to either blur or automatically pixelate the detected faces. This is done by setting the effect parameter to either blur_faces or pixelate_faces (e_blur_faces or e_pixelate_faces in URLs). The level of blurring and the size of the pixel squares can customized.

Original

Original

Blur faces

Blur faces

Pixelate faces

Pixelate faces
Ruby:
cl_image_tag("young_couple.jpg", :effect=>"blur_faces")
PHP:
cl_image_tag("young_couple.jpg", array("effect"=>"blur_faces"))
Python:
CloudinaryImage("young_couple.jpg").image(effect="blur_faces")
Node.js:
cloudinary.image("young_couple.jpg", {effect: "blur_faces"})
Java:
cloudinary.url().transformation(new Transformation().effect("blur_faces")).imageTag("young_couple.jpg")
jQuery:
$.cloudinary.image("young_couple.jpg", {effect: "blur_faces"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("blur_faces")).BuildImageTag("young_couple.jpg")
by Itay Taragano

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.

Original

Original

Face detection

Face detection

Faces detection

Faces detection
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")
jQuery:
$.cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Crop("thumb")).BuildImageTag("couple.jpg")
by Itay Taragano