Recipes of the Face-detection tag
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
Custom shaped
Semi-transparency
Automatically fetch social networks' profile pictures by setting the type parameter to the required network (e.g., facebook), apply any further transformations and add the user's initials as a text overlay.
Original
Face detection
With initials
cl_image_tag("Beckham.jpg", array("type"=>"facebook", "transformation"=>array( array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb"), array("overlay"=>array("font_family"=>"Arial", "font_size"=>50, "font_weight"=>"bold", "text"=>"DB"), "color"=>"white") )))
(new ImageTag('Beckham.jpg')) ->resize(Resize::thumbnail()->width(100)->height(100)->gravity(Gravity::focusOn(FocusOn::face()))) ->roundCorners(RoundCorners::max()) ->effect(Effect::blur()->strength(200)) ->overlay( Overlay::source( Source::text('DB', (new TextStyle('Arial', 50)) ->fontWeight(FontWeight::bold())) ->textColor(Color::WHITE))) ->deliveryType('facebook');
CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[ {'width': 100, 'height': 100, 'gravity': "face", 'effect': "blur:200", 'radius': "max", 'crop': "thumb"}, {'overlay': {'font_family': "Arial", 'font_size': 50, 'font_weight': "bold", 'text': "DB"}, 'color': "white"} ])
cloudinary.url().transformation(new Transformation() .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain() .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").imageTag("Beckham.jpg");
cloudinary.imageTag('Beckham.jpg', {type: "facebook", transformation: [ {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"}, {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"} ]}).toHtml();
$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [ {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"}, {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"} ]})
<cld-image publicId="Beckham.jpg" type="facebook"> <cld-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" /> <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 50, fontWeight: 'bold', text: 'DB'}" color="white" /> </cld-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain() .Overlay(new TextLayer().FontFamily("Arial").FontSize(50).FontWeight("bold").Text("DB")).Color("white")).Action("facebook").BuildImageTag("Beckham.jpg")
MediaManager.get().url().transformation(new Transformation() .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain() .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").generate("Beckham.jpg");
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation() .setWidth(100).setHeight(100).setGravity("face").setEffect("blur:200").setRadius("max").setCrop("thumb").chain() .setOverlay("text:Arial_50_bold:DB").setColor("white")).generate("Beckham.jpg")!, cloudinary: cloudinary)
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
Faces overlay
Funny overlay
(new ImageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg')) ->overlay( Overlay::source(Source::image('badge') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(30)))) ->position((new Position()) ->gravity(Gravity::focusOn(FocusOn::faces())))) ->deliveryType('fetch');
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)
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
Blur faces
Pixelate faces
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
Face detection
Faces detection
