Cloudinary cookbook background

Cloudinary Cookbook

← View popular recipes
Find recipes by tags:
View all 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.

Here's an image example uploaded to Cloudinary:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/young_couple.jpg
Ruby:
cl_image_tag("young_couple.jpg")
PHP:
cl_image_tag("young_couple.jpg")
Python:
CloudinaryImage("young_couple.jpg").image()
Node.js:
cloudinary.image("young_couple.jpg")
Java:
cloudinary.url().imageTag("young_couple.jpg");
JS:
cloudinary.imageTag('young_couple.jpg').toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg")
React:
<Image publicId="young_couple.jpg" >

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

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("young_couple.jpg")!, cloudinary: cloudinary)
Original

Blurring faces

Blur all detected faces of the image by setting the effect parameter to blur_faces (e_blur_faces in URLs):

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)
Blur faces

While the default blurring value is 100, you can customize the level to a value between 1 and 2000 (the higher the value - the more blurry the effect).
For instance, here's a more blurry example with a value of 1000:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_blur_faces:1000/young_couple.jpg
Ruby:
cl_image_tag("young_couple.jpg", :effect=>"blur_faces:1000")
PHP:
cl_image_tag("young_couple.jpg", array("effect"=>"blur_faces:1000"))
Python:
CloudinaryImage("young_couple.jpg").image(effect="blur_faces:1000")
Node.js:
cloudinary.image("young_couple.jpg", {effect: "blur_faces:1000"})
Java:
cloudinary.url().transformation(new Transformation().effect("blur_faces:1000")).imageTag("young_couple.jpg");
JS:
cloudinary.imageTag('young_couple.jpg', {effect: "blur_faces:1000"}).toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg", {effect: "blur_faces:1000"})
React:
<Image publicId="young_couple.jpg" >
  <Transformation effect="blur_faces:1000" />
</Image>
Angular:
<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="blur_faces:1000">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("blur_faces:1000")).BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("blur_faces:1000")).generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("blur_faces:1000")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Less blurry

Pixelating faces

Pixelate all detected faces in the image by setting the effect parameter to pixelate_faces (e_pixelate_faces in URLs):

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_pixelate_faces/young_couple.jpg
Ruby:
cl_image_tag("young_couple.jpg", :effect=>"pixelate_faces")
PHP:
cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces"))
Python:
CloudinaryImage("young_couple.jpg").image(effect="pixelate_faces")
Node.js:
cloudinary.image("young_couple.jpg", {effect: "pixelate_faces"})
Java:
cloudinary.url().transformation(new Transformation().effect("pixelate_faces")).imageTag("young_couple.jpg");
JS:
cloudinary.imageTag('young_couple.jpg', {effect: "pixelate_faces"}).toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg", {effect: "pixelate_faces"})
React:
<Image publicId="young_couple.jpg" >
  <Transformation effect="pixelate_faces" />
</Image>
Angular:
<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="pixelate_faces">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_faces")).BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("pixelate_faces")).generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("pixelate_faces")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Pixelate faces

You can also set a custom value for the size of the pixels squares. Here's an example of larger squares:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_pixelate_faces:50/young_couple.jpg
Ruby:
cl_image_tag("young_couple.jpg", :effect=>"pixelate_faces:50")
PHP:
cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces:50"))
Python:
CloudinaryImage("young_couple.jpg").image(effect="pixelate_faces:50")
Node.js:
cloudinary.image("young_couple.jpg", {effect: "pixelate_faces:50"})
Java:
cloudinary.url().transformation(new Transformation().effect("pixelate_faces:50")).imageTag("young_couple.jpg");
JS:
cloudinary.imageTag('young_couple.jpg', {effect: "pixelate_faces:50"}).toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg", {effect: "pixelate_faces:50"})
React:
<Image publicId="young_couple.jpg" >
  <Transformation effect="pixelate_faces:50" />
</Image>
Angular:
<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="pixelate_faces:50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_faces:50")).BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("pixelate_faces:50")).generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("pixelate_faces:50")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Larger squares pixelation

Here's an example of smaller squares:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_pixelate_faces:10/young_couple.jpg
Ruby:
cl_image_tag("young_couple.jpg", :effect=>"pixelate_faces:10")
PHP:
cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces:10"))
Python:
CloudinaryImage("young_couple.jpg").image(effect="pixelate_faces:10")
Node.js:
cloudinary.image("young_couple.jpg", {effect: "pixelate_faces:10"})
Java:
cloudinary.url().transformation(new Transformation().effect("pixelate_faces:10")).imageTag("young_couple.jpg");
JS:
cloudinary.imageTag('young_couple.jpg', {effect: "pixelate_faces:10"}).toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg", {effect: "pixelate_faces:10"})
React:
<Image publicId="young_couple.jpg" >
  <Transformation effect="pixelate_faces:10" />
</Image>
Angular:
<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="pixelate_faces:10">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_faces:10")).BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("pixelate_faces:10")).generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("pixelate_faces:10")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Smaller squares pixelation

by Itay Taragano
Tags: