Create a different mixture of colors for your images with the Hue filter. This can be applied by setting the effect
parameter to hue
(e_hue
in URLs). The hue level can be customized.
Here's an original image for example:
Ruby:
cl_image_tag("white_chicken.jpg")
PHP:
cl_image_tag("white_chicken.jpg")
Python:
CloudinaryImage("white_chicken.jpg").image()
Node.js:
cloudinary.image("white_chicken.jpg")
Java:
cloudinary.url().imageTag("white_chicken.jpg");
JS:
cloudinary.imageTag('white_chicken.jpg').toHtml();
jQuery:
$.cloudinary.image("white_chicken.jpg")
React:
<Image publicId="white_chicken.jpg" >
</Image>
Vue.js:
<cld-image publicId="white_chicken.jpg" >
</cld-image>
Angular:
<cl-image public-id="white_chicken.jpg" >
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("white_chicken.jpg")
Android:
MediaManager.get().url().generate("white_chicken.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("white_chicken.jpg")!, cloudinary: cloudinary)
Here it is again after applying the hue
effect with its default value:
Ruby:
cl_image_tag("white_chicken.jpg", :effect=>"hue")
PHP:
cl_image_tag("white_chicken.jpg", array("effect"=>"hue"))
Python:
CloudinaryImage("white_chicken.jpg").image(effect="hue")
Node.js:
cloudinary.image("white_chicken.jpg", {effect: "hue"})
Java:
cloudinary.url().transformation(new Transformation().effect("hue")).imageTag("white_chicken.jpg");
JS:
cloudinary.imageTag('white_chicken.jpg', {effect: "hue"}).toHtml();
jQuery:
$.cloudinary.image("white_chicken.jpg", {effect: "hue"})
React:
<Image publicId="white_chicken.jpg" >
<Transformation effect="hue" />
</Image>
Vue.js:
<cld-image publicId="white_chicken.jpg" >
<cld-transformation effect="hue" />
</cld-image>
Angular:
<cl-image public-id="white_chicken.jpg" >
<cl-transformation effect="hue">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue")).BuildImageTag("white_chicken.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("hue")).generate("white_chicken.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
While the default value is 80
, you can customize the hue level, for example:
Ruby:
cl_image_tag("white_chicken.jpg", :effect=>"hue:-40")
PHP:
cl_image_tag("white_chicken.jpg", array("effect"=>"hue:-40"))
Python:
CloudinaryImage("white_chicken.jpg").image(effect="hue:-40")
Node.js:
cloudinary.image("white_chicken.jpg", {effect: "hue:-40"})
Java:
cloudinary.url().transformation(new Transformation().effect("hue:-40")).imageTag("white_chicken.jpg");
JS:
cloudinary.imageTag('white_chicken.jpg', {effect: "hue:-40"}).toHtml();
jQuery:
$.cloudinary.image("white_chicken.jpg", {effect: "hue:-40"})
React:
<Image publicId="white_chicken.jpg" >
<Transformation effect="hue:-40" />
</Image>
Vue.js:
<cld-image publicId="white_chicken.jpg" >
<cld-transformation effect="hue:-40" />
</cld-image>
Angular:
<cl-image public-id="white_chicken.jpg" >
<cl-transformation effect="hue:-40">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue:-40")).BuildImageTag("white_chicken.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("hue:-40")).generate("white_chicken.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue:-40")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
The adjustment of the Hue level is not limited to the main image, it can be changed for overlaid images as well.
Here's the same image with an avatar overlay, scaled-down and placed in a 20 pixels offset (for both x and y) from the south-east corner:
Ruby:
cl_image_tag("white_chicken.jpg", :overlay=>"avatar2", :gravity=>"south_east", :x=>20, :y=>20, :width=>200)
PHP:
cl_image_tag("white_chicken.jpg", array("overlay"=>"avatar2", "gravity"=>"south_east", "x"=>20, "y"=>20, "width"=>200))
Python:
CloudinaryImage("white_chicken.jpg").image(overlay="avatar2", gravity="south_east", x=20, y=20, width=200)
Node.js:
cloudinary.image("white_chicken.jpg", {overlay: "avatar2", gravity: "south_east", x: 20, y: 20, width: 200})
Java:
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200)).imageTag("white_chicken.jpg");
JS:
cloudinary.imageTag('white_chicken.jpg', {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200}).toHtml();
jQuery:
$.cloudinary.image("white_chicken.jpg", {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200})
React:
<Image publicId="white_chicken.jpg" >
<Transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" />
</Image>
Vue.js:
<cld-image publicId="white_chicken.jpg" >
<cld-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" />
</cld-image>
Angular:
<cl-image public-id="white_chicken.jpg" >
<cl-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("avatar2")).Gravity("south_east").X(20).Y(20).Width(200)).BuildImageTag("white_chicken.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200)).generate("white_chicken.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("avatar2").setGravity("south_east").setX(20).setY(20).setWidth(200)).generate("white_chicken.jpg")!, cloudinary: cloudinary)
Here's the same image after applying the hue effect (with a custom level 50
) on the overlay avatar image:
Ruby:
cl_image_tag("white_chicken.jpg", :overlay=>"avatar2", :gravity=>"south_east", :x=>20, :y=>20, :width=>200, :effect=>"hue:50")
PHP:
cl_image_tag("white_chicken.jpg", array("overlay"=>"avatar2", "gravity"=>"south_east", "x"=>20, "y"=>20, "width"=>200, "effect"=>"hue:50"))
Python:
CloudinaryImage("white_chicken.jpg").image(overlay="avatar2", gravity="south_east", x=20, y=20, width=200, effect="hue:50")
Node.js:
cloudinary.image("white_chicken.jpg", {overlay: "avatar2", gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200).effect("hue:50")).imageTag("white_chicken.jpg");
JS:
cloudinary.imageTag('white_chicken.jpg', {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"}).toHtml();
jQuery:
$.cloudinary.image("white_chicken.jpg", {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"})
React:
<Image publicId="white_chicken.jpg" >
<Transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" effect="hue:50" />
</Image>
Vue.js:
<cld-image publicId="white_chicken.jpg" >
<cld-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" effect="hue:50" />
</cld-image>
Angular:
<cl-image public-id="white_chicken.jpg" >
<cl-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" effect="hue:50">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("avatar2")).Gravity("south_east").X(20).Y(20).Width(200).Effect("hue:50")).BuildImageTag("white_chicken.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200).effect("hue:50")).generate("white_chicken.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("avatar2").setGravity("south_east").setX(20).setY(20).setWidth(200).setEffect("hue:50")).generate("white_chicken.jpg")!, cloudinary: cloudinary)