Add a warm, antique feeling to your photos using the 'Sepia' filter effect. This is done by setting the effect parameter to sepia (e_sepia in URLs). You can also customize the strength of the Sepia effect.
Here's an original example image:
Ruby:
cl_image_tag("coast.jpg")PHP:
cl_image_tag("coast.jpg")Python:
CloudinaryImage("coast.jpg").image()Node.js:
cloudinary.image("coast.jpg")Java:
cloudinary.url().imageTag("coast.jpg");JS:
cloudinary.imageTag('coast.jpg').toHtml();jQuery:
$.cloudinary.image("coast.jpg")
React:
<Image publicId="coast.jpg" > </Image>
Angular:
<cl-image public-id="coast.jpg" > </cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("coast.jpg")Android:
MediaManager.get().url().generate("coast.jpg");iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("coast.jpg")!, cloudinary: cloudinary)
And here's the same image after applying the sepia effect:
Ruby:
cl_image_tag("coast.jpg", :effect=>"sepia")
PHP:
cl_image_tag("coast.jpg", array("effect"=>"sepia"))
Python:
CloudinaryImage("coast.jpg").image(effect="sepia")
Node.js:
cloudinary.image("coast.jpg", {effect: "sepia"})
Java:
cloudinary.url().transformation(new Transformation().effect("sepia")).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {effect: "sepia"}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {effect: "sepia"})
React:
<Image publicId="coast.jpg" > <Transformation effect="sepia" /> </Image>
Angular:
<cl-image public-id="coast.jpg" > <cl-transformation effect="sepia"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia")).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("sepia")).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia")).generate("coast.jpg")!, cloudinary: cloudinary)
In order to customize the effect's strength you add a colon and the strength of the effect. While the default value is 80, you can specify the strength between 1 and 100.
For example:
Ruby:
cl_image_tag("coast.jpg", :effect=>"sepia:50")
PHP:
cl_image_tag("coast.jpg", array("effect"=>"sepia:50"))
Python:
CloudinaryImage("coast.jpg").image(effect="sepia:50")
Node.js:
cloudinary.image("coast.jpg", {effect: "sepia:50"})
Java:
cloudinary.url().transformation(new Transformation().effect("sepia:50")).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {effect: "sepia:50"}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {effect: "sepia:50"})
React:
<Image publicId="coast.jpg" > <Transformation effect="sepia:50" /> </Image>
Angular:
<cl-image public-id="coast.jpg" > <cl-transformation effect="sepia:50"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia:50")).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("sepia:50")).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia:50")).generate("coast.jpg")!, cloudinary: cloudinary)
You can add any further transformations, for example - changing the strength to a higher value, resizing, cropping to a circle, and adding a watermark:
Ruby:
cl_image_tag("coast.jpg", :transformation=>[ {:width=>200, :height=>200, :crop=>"fill"}, {:effect=>"sepia:100"}, {:overlay=>"sample_watermark", :width=>150}, {:radius=>"max"} ])
PHP:
cl_image_tag("coast.jpg", array("transformation"=>array( array("width"=>200, "height"=>200, "crop"=>"fill"), array("effect"=>"sepia:100"), array("overlay"=>"sample_watermark", "width"=>150), array("radius"=>"max") )))
Python:
CloudinaryImage("coast.jpg").image(transformation=[ {'width': 200, 'height': 200, 'crop': "fill"}, {'effect': "sepia:100"}, {'overlay': "sample_watermark", 'width': 150}, {'radius': "max"} ])
Node.js:
cloudinary.image("coast.jpg", {transformation: [ {width: 200, height: 200, crop: "fill"}, {effect: "sepia:100"}, {overlay: "sample_watermark", width: 150}, {radius: "max"} ]})
Java:
cloudinary.url().transformation(new Transformation() .width(200).height(200).crop("fill").chain() .effect("sepia:100").chain() .overlay(new Layer().publicId("sample_watermark")).width(150).chain() .radius("max")).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {transformation: [ {width: 200, height: 200, crop: "fill"}, {effect: "sepia:100"}, {overlay: new cloudinary.Layer().publicId("sample_watermark"), width: 150}, {radius: "max"} ]}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {transformation: [ {width: 200, height: 200, crop: "fill"}, {effect: "sepia:100"}, {overlay: new cloudinary.Layer().publicId("sample_watermark"), width: 150}, {radius: "max"} ]})
React:
<Image publicId="coast.jpg" > <Transformation width="200" height="200" crop="fill" /> <Transformation effect="sepia:100" /> <Transformation overlay="sample_watermark" width="150" /> <Transformation radius="max" /> </Image>
Angular:
<cl-image public-id="coast.jpg" > <cl-transformation width="200" height="200" crop="fill"> </cl-transformation> <cl-transformation effect="sepia:100"> </cl-transformation> <cl-transformation overlay="sample_watermark" width="150"> </cl-transformation> <cl-transformation radius="max"> </cl-transformation> </cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(200).Height(200).Crop("fill").Chain() .Effect("sepia:100").Chain() .Overlay(new Layer().PublicId("sample_watermark")).Width(150).Chain() .Radius("max")).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation() .width(200).height(200).crop("fill").chain() .effect("sepia:100").chain() .overlay(new Layer().publicId("sample_watermark")).width(150).chain() .radius("max")).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(200).setHeight(200).setCrop("fill").chain() .setEffect("sepia:100").chain() .setOverlay("sample_watermark").setWidth(150).chain() .setRadius("max")).generate("coast.jpg")!, cloudinary: cloudinary)
