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 v1 PHP v2 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 v1:

cl_image_tag("young_couple.jpg")

PHP v2:

(new ImageTag('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 v1 PHP v2 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 v1:

cl_image_tag("young_couple.jpg", array("effect"=>"blur_faces"))

PHP v2:

(new ImageTag('young_couple.jpg'))
  ->effect(Effect::blur()->region(Region::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 v1 PHP v2 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 v1:

cl_image_tag("young_couple.jpg", array("effect"=>"blur_faces:1000"))

PHP v2:

(new ImageTag('young_couple.jpg'))
  ->effect(Effect::blur()->strength(1000)->region(Region::faces()));

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 v1 PHP v2 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 v1:

cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces"))

PHP v2:

(new ImageTag('young_couple.jpg'))
  ->effect(Effect::pixelate()->region(Region::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 v1 PHP v2 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 v1:

cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces:50"))

PHP v2:

(new ImageTag('young_couple.jpg'))
  ->effect(Effect::pixelate()->squareSize(50)
    ->region(Region::faces()));

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 v1 PHP v2 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 v1:

cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces:10"))

PHP v2:

(new ImageTag('young_couple.jpg'))
  ->effect(Effect::pixelate()->squareSize(10)
    ->region(Region::faces()));

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)