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:
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):
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:
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):
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:
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:
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)