Saturation level of images can be easily increased or decreased on-the-fly. This can be done by setting the effect parameter to saturation (e_saturation in URLs). Saturation levels can be customized by specifying the saturation percentage, either positive or negative.
Here's an original image uploaded to Cloudinary:
Ruby:
cl_image_tag("vegetable_soup.jpg")PHP:
cl_image_tag("vegetable_soup.jpg")Python:
CloudinaryImage("vegetable_soup.jpg").image()Node.js:
cloudinary.image("vegetable_soup.jpg")Java:
cloudinary.url().imageTag("vegetable_soup.jpg")JS:
cl.imageTag('vegetable_soup.jpg').toHtml();jQuery:
$.cloudinary.image("vegetable_soup.jpg")
React:
<Image publicId="vegetable_soup.jpg" > </Image>
Angular:
<cl-image public-id="vegetable_soup.jpg" > </cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("vegetable_soup.jpg")Android:
MediaManager.get().url().generate("vegetable_soup.jpg")
The following examples modify the color saturation of the image. A negative saturation value will reduce color saturation while a positive value will increase it.
Here's an example of increasing the saturation level by 60%:
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:60")
PHP:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:60"))
Python:
CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:60")
Node.js:
cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
Java:
cloudinary.url().transformation(new Transformation().effect("saturation:60")).imageTag("vegetable_soup.jpg")
JS:
cl.imageTag('vegetable_soup.jpg', {effect: "saturation:60"}).toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
React:
<Image publicId="vegetable_soup.jpg" > <Transformation effect="saturation:60" /> </Image>
Angular:
<cl-image public-id="vegetable_soup.jpg" > <cl-transformation effect="saturation:60"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:60")).BuildImageTag("vegetable_soup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("saturation:60")).generate("vegetable_soup.jpg")
Here's an example of decreasing the saturation level by 60%:
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:-60")
PHP:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:-60"))
Python:
CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:-60")
Node.js:
cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-60"})
Java:
cloudinary.url().transformation(new Transformation().effect("saturation:-60")).imageTag("vegetable_soup.jpg")
JS:
cl.imageTag('vegetable_soup.jpg', {effect: "saturation:-60"}).toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-60"})
React:
<Image publicId="vegetable_soup.jpg" > <Transformation effect="saturation:-60" /> </Image>
Angular:
<cl-image public-id="vegetable_soup.jpg" > <cl-transformation effect="saturation:-60"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:-60")).BuildImageTag("vegetable_soup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("saturation:-60")).generate("vegetable_soup.jpg")
Decreasing the saturation level by 100% generates a grayscale version of the image:
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:-100")
PHP:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:-100"))
Python:
CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:-100")
Node.js:
cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-100"})
Java:
cloudinary.url().transformation(new Transformation().effect("saturation:-100")).imageTag("vegetable_soup.jpg")
JS:
cl.imageTag('vegetable_soup.jpg', {effect: "saturation:-100"}).toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-100"})
React:
<Image publicId="vegetable_soup.jpg" > <Transformation effect="saturation:-100" /> </Image>
Angular:
<cl-image public-id="vegetable_soup.jpg" > <cl-transformation effect="saturation:-100"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:-100")).BuildImageTag("vegetable_soup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("saturation:-100")).generate("vegetable_soup.jpg")
Not specifying the saturation level, increases color saturation by the default level of 80%:
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation")
PHP:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation"))
Python:
CloudinaryImage("vegetable_soup.jpg").image(effect="saturation")
Node.js:
cloudinary.image("vegetable_soup.jpg", {effect: "saturation"})
Java:
cloudinary.url().transformation(new Transformation().effect("saturation")).imageTag("vegetable_soup.jpg")
JS:
cl.imageTag('vegetable_soup.jpg', {effect: "saturation"}).toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation"})
React:
<Image publicId="vegetable_soup.jpg" > <Transformation effect="saturation" /> </Image>
Angular:
<cl-image public-id="vegetable_soup.jpg" > <cl-transformation effect="saturation"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation")).BuildImageTag("vegetable_soup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("saturation")).generate("vegetable_soup.jpg")
