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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="young_couple.jpg" >

</cld-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)

Blurring faces

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

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="young_couple.jpg" >
  <cld-transformation effect="blur_faces" />
</cld-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)

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="young_couple.jpg" >
  <cld-transformation effect="blur_faces:1000" />
</cld-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)

Pixelating faces

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

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="young_couple.jpg" >
  <cld-transformation effect="pixelate_faces" />
</cld-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)

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

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="young_couple.jpg" >
  <cld-transformation effect="pixelate_faces:50" />
</cld-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)

Here's an example of smaller squares:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="young_couple.jpg" >
  <cld-transformation effect="pixelate_faces:10" />
</cld-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)