Pixelate an image or a region

Apply a pixelization effect to an image by setting the effect parameter to pixelate (e_pixelate in URLs). You can choose to pixelate the whole image or just a certain region of the image, and the size of the squares is customizable.

Here's an original image fetched on-the-fly from a public remote HTTP URL at Wikimedia Commons:

Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
Original

Using the pixelate effect to apply pixelization on the whole image:

Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate", "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate", type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {effect: "pixelate", type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation effect="pixelate" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cld-transformation effect="pixelate" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation effect="pixelate">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
Pixeling an image

Control the effect’s intensity by specifying the size of the pixelization squares (numeric value, in pixels). In the following example, we applied the pixelate effect using 10 pixel blocks on the image:

Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate:10", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate:10", "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate:10", type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate:10", type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate:10")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {effect: "pixelate:10", type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate:10", type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation effect="pixelate:10" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cld-transformation effect="pixelate:10" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation effect="pixelate:10">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate:10")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate:10")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate:10")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
Custom squares size

You can also blur only a certain region of the image based on the position (x, y) and dimensions (width and height) of the region by using the pixelate_region effect. This technique can be used to pixelate only the car's license plates in the following example:

Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate_region", :height=>80, :width=>200, :x=>170, :y=>260, :crop=>"fill", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate_region", "height"=>80, "width"=>200, "x"=>170, "y"=>260, "crop"=>"fill", "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate_region", height=80, width=200, x=170, y=260, crop="fill", type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate_region").height(80).width(200).x(170).y(260).crop("fill")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {effect: "pixelate_region", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation effect="pixelate_region" height="80" width="200" x="170" y="260" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cld-transformation effect="pixelate_region" height="80" width="200" x="170" y="260" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation effect="pixelate_region" height="80" width="200" x="170" y="260" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_region").Height(80).Width(200).X(170).Y(260).Crop("fill")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate_region").height(80).width(200).x(170).y(260).crop("fill")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate_region").setHeight(80).setWidth(200).setX(170).setY(260).setCrop("fill")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
Pixeling a region

The pixelate_region effect also supports customizing the squares' size, this time we'll make them bigger:

Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate_region:30", :height=>80, :width=>200, :x=>170, :y=>260, :crop=>"fill", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate_region:30", "height"=>80, "width"=>200, "x"=>170, "y"=>260, "crop"=>"fill", "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate_region:30", height=80, width=200, x=170, y=260, crop="fill", type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region:30", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate_region:30").height(80).width(200).x(170).y(260).crop("fill")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {effect: "pixelate_region:30", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region:30", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation effect="pixelate_region:30" height="80" width="200" x="170" y="260" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cld-transformation effect="pixelate_region:30" height="80" width="200" x="170" y="260" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation effect="pixelate_region:30" height="80" width="200" x="170" y="260" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_region:30").Height(80).Width(200).X(170).Y(260).Crop("fill")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate_region:30").height(80).width(200).x(170).y(260).crop("fill")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate_region:30").setHeight(80).setWidth(200).setX(170).setY(260).setCrop("fill")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
Pixeling a region

With the pixelate effect you can create nice looking effects, for example:

Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :type=>"fetch", :transformation=>[
  {:angle=>45},
  {:effect=>"pixelate:10"},
  {:angle=>-45},
  {:effect=>"trim"},
  {:width=>0.9, :crop=>"crop"}
  ])
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("type"=>"fetch", "transformation"=>array(
  array("angle"=>45),
  array("effect"=>"pixelate:10"),
  array("angle"=>-45),
  array("effect"=>"trim"),
  array("width"=>0.9, "crop"=>"crop")
  )))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(type="fetch", transformation=[
  {'angle': 45},
  {'effect': "pixelate:10"},
  {'angle': -45},
  {'effect': "trim"},
  {'width': 0.9, 'crop': "crop"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch", transformation: [
  {angle: 45},
  {effect: "pixelate:10"},
  {angle: -45},
  {effect: "trim"},
  {width: "0.9", crop: "crop"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .angle(45).chain()
  .effect("pixelate:10").chain()
  .angle(-45).chain()
  .effect("trim").chain()
  .width(0.9).crop("crop")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {type: "fetch", transformation: [
  {angle: 45},
  {effect: "pixelate:10"},
  {angle: -45},
  {effect: "trim"},
  {width: "0.9", crop: "crop"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch", transformation: [
  {angle: 45},
  {effect: "pixelate:10"},
  {angle: -45},
  {effect: "trim"},
  {width: "0.9", crop: "crop"}
  ]})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation angle="45" />
  <Transformation effect="pixelate:10" />
  <Transformation angle="-45" />
  <Transformation effect="trim" />
  <Transformation width="0.9" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cld-transformation angle="45" />
  <cld-transformation effect="pixelate:10" />
  <cld-transformation angle="-45" />
  <cld-transformation effect="trim" />
  <cld-transformation width="0.9" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation angle="45">
  </cl-transformation>
  <cl-transformation effect="pixelate:10">
  </cl-transformation>
  <cl-transformation angle="-45">
  </cl-transformation>
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation width="0.9" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Angle(45).Chain()
  .Effect("pixelate:10").Chain()
  .Angle(-45).Chain()
  .Effect("trim").Chain()
  .Width(0.9).Crop("crop")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .angle(45).chain()
  .effect("pixelate:10").chain()
  .angle(-45).chain()
  .effect("trim").chain()
  .width(0.9).crop("crop")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation()
  .setAngle(45).chain()
  .setEffect("pixelate:10").chain()
  .setAngle(-45).chain()
  .setEffect("trim").chain()
  .setWidth(0.9).setCrop("crop")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
Nice Pixelate effect

Additionally, if you're using our OCR Text Detection and Extraction add-on, you can use the results of that add-on to automatically pixelate the areas of the image which contained detected text

For example, for this image which has text information provided by the OCR add-on:

Ruby:
Copy to clipboard
cl_image_tag("piano.jpg")
PHP:
Copy to clipboard
cl_image_tag("piano.jpg")
Python:
Copy to clipboard
CloudinaryImage("piano.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("piano.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("piano.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('piano.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("piano.jpg")
React:
Copy to clipboard
<Image publicId="piano.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="piano.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="piano.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("piano.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("piano.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("piano.jpg")!, cloudinary: cloudinary)
Example with OCR applied

You can pixellate the detected text using the ocr_text gravity option:

Ruby:
Copy to clipboard
cl_image_tag("piano.jpg", :effect=>"pixelate_region:20", :gravity=>"ocr_text")
PHP:
Copy to clipboard
cl_image_tag("piano.jpg", array("effect"=>"pixelate_region:20", "gravity"=>"ocr_text"))
Python:
Copy to clipboard
CloudinaryImage("piano.jpg").image(effect="pixelate_region:20", gravity="ocr_text")
Node.js:
Copy to clipboard
cloudinary.image("piano.jpg", {effect: "pixelate_region:20", gravity: "ocr_text"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate_region:20").gravity("ocr_text")).imageTag("piano.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('piano.jpg', {effect: "pixelate_region:20", gravity: "ocr_text"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("piano.jpg", {effect: "pixelate_region:20", gravity: "ocr_text"})
React:
Copy to clipboard
<Image publicId="piano.jpg" >
  <Transformation effect="pixelate_region:20" gravity="ocr_text" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="piano.jpg" >
  <cld-transformation effect="pixelate_region:20" gravity="ocr_text" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="piano.jpg" >
  <cl-transformation effect="pixelate_region:20" gravity="ocr_text">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_region:20").Gravity("ocr_text")).BuildImageTag("piano.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate_region:20").gravity("ocr_text")).generate("piano.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("pixelate_region:20").setGravity("ocr_text")).generate("piano.jpg")!, cloudinary: cloudinary)
Example with OCR applied

by Itay Taragano