Cloudinary Cookbook recipes about Grayscale

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

Grayscale

Gradient fade

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_grayscale/happy_dog.jpg

Ruby:

cl_image_tag("happy_dog.jpg", :effect=>"grayscale")

PHP v1:

cl_image_tag("happy_dog.jpg", array("effect"=>"grayscale"))

PHP v2:

(new ImageTag('happy_dog.jpg'))
  ->effect(Effect::grayscale());

Python:

CloudinaryImage("happy_dog.jpg").image(effect="grayscale")

Node.js:

cloudinary.image("happy_dog.jpg", {effect: "grayscale"})

Java:

cloudinary.url().transformation(new Transformation().effect("grayscale")).imageTag("happy_dog.jpg");

JS:

cloudinary.imageTag('happy_dog.jpg', {effect: "grayscale"}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg", {effect: "grayscale"})

React:

<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.jpg" >
  <cld-transformation effect="grayscale" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("grayscale")).BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("grayscale")).generate("happy_dog.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("grayscale")).generate("happy_dog.jpg")!, cloudinary: cloudinary)

by Itay Taragano Aug 05, 2014

Tags: