Convert image to grayscale

Convert images to grayscale by setting the effect parameter to grayscale (e_grayscale in URLs). You can add further transformations in order to achieve the exact result you need.

Original

Original

Grayscale

Grayscale

Gradient fade

Gradient fade
Ruby:
Copy to clipboard
cl_image_tag("happy_dog.jpg", :effect=>"grayscale")
PHP:
Copy to clipboard
cl_image_tag("happy_dog.jpg", array("effect"=>"grayscale"))
Python:
Copy to clipboard
CloudinaryImage("happy_dog.jpg").image(effect="grayscale")
Node.js:
Copy to clipboard
cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("grayscale")).imageTag("happy_dog.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('happy_dog.jpg', {effect: "grayscale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
React:
Copy to clipboard
<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="happy_dog.jpg" >
  <cld-transformation effect="grayscale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("grayscale")).BuildImageTag("happy_dog.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("grayscale")).generate("happy_dog.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("grayscale")).generate("happy_dog.jpg")!, cloudinary: cloudinary)
by Itay Taragano