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 v1:
cl_image_tag("vegetable_soup.jpg")
PHP v2:
(new ImageTag('vegetable_soup.jpg'));
Python:
CloudinaryImage("vegetable_soup.jpg").image()
Node.js:
cloudinary.image("vegetable_soup.jpg")
Java:
cloudinary.url().imageTag("vegetable_soup.jpg");
JS:
cloudinary.imageTag('vegetable_soup.jpg').toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg")
React:
<Image publicId="vegetable_soup.jpg" >
</Image>
Vue.js:
<cld-image publicId="vegetable_soup.jpg" >
</cld-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");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("vegetable_soup.jpg")!, cloudinary: cloudinary)
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 v1:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:60"))
PHP v2:
(new ImageTag('vegetable_soup.jpg'))
->adjust(Adjust::saturation()->level(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:
cloudinary.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>
Vue.js:
<cld-image publicId="vegetable_soup.jpg" >
<cld-transformation effect="saturation:60" />
</cld-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");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:60")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)
Here's an example of decreasing the saturation level by 60%:
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:-60")
PHP v1:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:-60"))
PHP v2:
(new ImageTag('vegetable_soup.jpg'))
->adjust(Adjust::saturation()->level(-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:
cloudinary.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>
Vue.js:
<cld-image publicId="vegetable_soup.jpg" >
<cld-transformation effect="saturation:-60" />
</cld-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");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:-60")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)
Decreasing the saturation level by 100% generates a grayscale version of the image:
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:-100")
PHP v1:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:-100"))
PHP v2:
(new ImageTag('vegetable_soup.jpg'))
->adjust(Adjust::saturation()->level(-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:
cloudinary.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>
Vue.js:
<cld-image publicId="vegetable_soup.jpg" >
<cld-transformation effect="saturation:-100" />
</cld-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");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:-100")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)
Not specifying the saturation level, increases color saturation by the default level of 80%:
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation")
PHP v1:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation"))
PHP v2:
(new ImageTag('vegetable_soup.jpg'))
->adjust(Adjust::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:
cloudinary.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>
Vue.js:
<cld-image publicId="vegetable_soup.jpg" >
<cld-transformation effect="saturation" />
</cld-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");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)