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 v1:
cl_image_tag("mountain.jpg")
PHP v2:
(new ImageTag('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>
Vue.js:
<cld-image publicId="mountain.jpg" >
</cld-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 v1:
cl_image_tag("mountain.jpg", array("effect"=>"brightness:30"))
PHP v2:
(new ImageTag('mountain.jpg'))
->adjust(Adjust::brightness()->level(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>
Vue.js:
<cld-image publicId="mountain.jpg" >
<cld-transformation effect="brightness:30" />
</cld-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 v1:
cl_image_tag("mountain.jpg", array("effect"=>"brightness:-50"))
PHP v2:
(new ImageTag('mountain.jpg'))
->adjust(Adjust::brightness()->level(-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>
Vue.js:
<cld-image publicId="mountain.jpg" >
<cld-transformation effect="brightness:-50" />
</cld-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 v1:
cl_image_tag("mountain.jpg", array("effect"=>"brightness"))
PHP v2:
(new ImageTag('mountain.jpg'))
->adjust(Adjust::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>
Vue.js:
<cld-image publicId="mountain.jpg" >
<cld-transformation effect="brightness" />
</cld-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 v1:
cl_image_tag("mountain.jpg", array("effect"=>"auto_brightness"))
PHP v2:
(new ImageTag('mountain.jpg'))
->adjust(Adjust::autoBrightness());
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>
Vue.js:
<cld-image publicId="mountain.jpg" >
<cld-transformation effect="auto_brightness" />
</cld-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)