Cloudinary cookbook background

Cloudinary Cookbook

Recipes of the Face-detection tag

← View popular recipes
Find recipes by tags:
View all tags

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_173,h_200,c_fill/l_hexagon_sample,fl_cutter/pasta.png
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(new Layer().publicId("hexagon_sample")).flags("cutter")).imageTag("pasta.png");
JS:
cloudinary.imageTag('pasta.png', {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: "cutter"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: "cutter"}
  ]})
React:
<Image publicId="pasta.png" >
  <Transformation width="173" height="200" crop="fill" />
  <Transformation overlay="hexagon_sample" flags="cutter" />
</Image>
Angular:
<cl-image public-id="pasta.png" >
  <cl-transformation width="173" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="hexagon_sample" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(173).Height(200).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("hexagon_sample")).Flags("cutter")).BuildImageTag("pasta.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay(new Layer().publicId("hexagon_sample")).flags("cutter")).generate("pasta.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(173).setHeight(200).setCrop("fill").chain()
  .setOverlay("hexagon_sample").setFlags("cutter")).generate("pasta.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/fetch/l_badge,g_faces,w_30/http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg
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(new Layer().publicId("badge")).gravity("faces").width(30)).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg");
JS:
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg', {overlay: new cloudinary.Layer().publicId("badge"), gravity: "faces", width: 30, type: "fetch"}).toHtml();
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: new cloudinary.Layer().publicId("badge"), gravity: "faces", width: 30, type: "fetch"})
React:
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <Transformation overlay="badge" gravity="faces" width="30" />
</Image>
Angular:
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <cl-transformation overlay="badge" gravity="faces" width="30">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("badge")).Gravity("faces").Width(30)).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("badge")).gravity("faces").width(30)).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setOverlay("badge").setGravity("faces").setWidth(30)).generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_blur_faces/young_couple.jpg
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");
JS:
cloudinary.imageTag('young_couple.jpg', {effect: "blur_faces"}).toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg", {effect: "blur_faces"})
React:
<Image publicId="young_couple.jpg" >
  <Transformation effect="blur_faces" />
</Image>
Angular:
<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="blur_faces">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("blur_faces")).BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("blur_faces")).generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("blur_faces")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_100,h_100,c_thumb,g_face/couple.jpg
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:
cloudinary.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")
Android:
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).generate("couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags: