Dynamically adjust the brightness of an image. Either manually set the brightness level, or tell Cloudinary to automatically balance the brightness level. Brightness level change can be manually applied by setting the effect parameter to brightness (e_brightness in URLs), or by using the auto_brightness effect for automatic brightness adjustment.
Here's an original image example:
Ruby:
cl_image_tag("mountain.jpg")PHP:
cl_image_tag("mountain.jpg")Python:
CloudinaryImage("mountain.jpg").image()Node.js:
cloudinary.image("mountain.jpg")Java:
cloudinary.url().imageTag("mountain.jpg");JS:
cloudinary.imageTag('mountain.jpg').toHtml();jQuery:
$.cloudinary.image("mountain.jpg")
React:
<Image publicId="mountain.jpg" > </Image>
Angular:
<cl-image public-id="mountain.jpg" > </cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("mountain.jpg")Android:
MediaManager.get().url().generate("mountain.jpg");iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("mountain.jpg")!, cloudinary: cloudinary)
Below you can see the same image while increasing brightness by 30%:
Ruby:
cl_image_tag("mountain.jpg", :effect=>"brightness:30")
PHP:
cl_image_tag("mountain.jpg", array("effect"=>"brightness:30"))
Python:
CloudinaryImage("mountain.jpg").image(effect="brightness:30")
Node.js:
cloudinary.image("mountain.jpg", {effect: "brightness:30"})
Java:
cloudinary.url().transformation(new Transformation().effect("brightness:30")).imageTag("mountain.jpg");
JS:
cloudinary.imageTag('mountain.jpg', {effect: "brightness:30"}).toHtml();
jQuery:
$.cloudinary.image("mountain.jpg", {effect: "brightness:30"})
React:
<Image publicId="mountain.jpg" > <Transformation effect="brightness:30" /> </Image>
Angular:
<cl-image public-id="mountain.jpg" > <cl-transformation effect="brightness:30"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness:30")).BuildImageTag("mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("brightness:30")).generate("mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("brightness:30")).generate("mountain.jpg")!, cloudinary: cloudinary)
And here it is when decreasing the brightness level by 50%:
Ruby:
cl_image_tag("mountain.jpg", :effect=>"brightness:-50")
PHP:
cl_image_tag("mountain.jpg", array("effect"=>"brightness:-50"))
Python:
CloudinaryImage("mountain.jpg").image(effect="brightness:-50")
Node.js:
cloudinary.image("mountain.jpg", {effect: "brightness:-50"})
Java:
cloudinary.url().transformation(new Transformation().effect("brightness:-50")).imageTag("mountain.jpg");
JS:
cloudinary.imageTag('mountain.jpg', {effect: "brightness:-50"}).toHtml();
jQuery:
$.cloudinary.image("mountain.jpg", {effect: "brightness:-50"})
React:
<Image publicId="mountain.jpg" > <Transformation effect="brightness:-50" /> </Image>
Angular:
<cl-image public-id="mountain.jpg" > <cl-transformation effect="brightness:-50"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness:-50")).BuildImageTag("mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("brightness:-50")).generate("mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("brightness:-50")).generate("mountain.jpg")!, cloudinary: cloudinary)
If you don't specify a custom brightness level, the default level of 80% is applied:
Ruby:
cl_image_tag("mountain.jpg", :effect=>"brightness")
PHP:
cl_image_tag("mountain.jpg", array("effect"=>"brightness"))
Python:
CloudinaryImage("mountain.jpg").image(effect="brightness")
Node.js:
cloudinary.image("mountain.jpg", {effect: "brightness"})
Java:
cloudinary.url().transformation(new Transformation().effect("brightness")).imageTag("mountain.jpg");
JS:
cloudinary.imageTag('mountain.jpg', {effect: "brightness"}).toHtml();
jQuery:
$.cloudinary.image("mountain.jpg", {effect: "brightness"})
React:
<Image publicId="mountain.jpg" > <Transformation effect="brightness" /> </Image>
Angular:
<cl-image public-id="mountain.jpg" > <cl-transformation effect="brightness"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness")).BuildImageTag("mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("brightness")).generate("mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("brightness")).generate("mountain.jpg")!, cloudinary: cloudinary)
You can also tell Cloudinary to automatically detect and apply the optimal brightness level:
Ruby:
cl_image_tag("mountain.jpg", :effect=>"auto_brightness")
PHP:
cl_image_tag("mountain.jpg", array("effect"=>"auto_brightness"))
Python:
CloudinaryImage("mountain.jpg").image(effect="auto_brightness")
Node.js:
cloudinary.image("mountain.jpg", {effect: "auto_brightness"})
Java:
cloudinary.url().transformation(new Transformation().effect("auto_brightness")).imageTag("mountain.jpg");
JS:
cloudinary.imageTag('mountain.jpg', {effect: "auto_brightness"}).toHtml();
jQuery:
$.cloudinary.image("mountain.jpg", {effect: "auto_brightness"})
React:
<Image publicId="mountain.jpg" > <Transformation effect="auto_brightness" /> </Image>
Angular:
<cl-image public-id="mountain.jpg" > <cl-transformation effect="auto_brightness"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("auto_brightness")).BuildImageTag("mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("auto_brightness")).generate("mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("auto_brightness")).generate("mountain.jpg")!, cloudinary: cloudinary)
