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 v1:
cl_image_tag("coast.jpg")
PHP v2:
(new ImageTag('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>
Vue.js:
<cld-image publicId="coast.jpg" >
</cld-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 v1:
cl_image_tag("coast.jpg", array("effect"=>"sepia"))
PHP v2:
(new ImageTag('coast.jpg'))
->effect(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>
Vue.js:
<cld-image publicId="coast.jpg" >
<cld-transformation effect="sepia" />
</cld-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 v1:
cl_image_tag("coast.jpg", array("effect"=>"sepia:50"))
PHP v2:
(new ImageTag('coast.jpg'))
->effect(Effect::sepia()->level(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>
Vue.js:
<cld-image publicId="coast.jpg" >
<cld-transformation effect="sepia:50" />
</cld-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 v1:
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")
)))
PHP v2:
(new ImageTag('coast.jpg'))
->resize(Resize::fill()->width(200)->height(200))
->effect(Effect::sepia()->level(100))
->overlay(
Overlay::source(Source::image('sample_watermark')
->transformation((new ImageTransformation())
->resize(Resize::scale()->width(150)))))
->roundCorners(RoundCorners::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>
Vue.js:
<cld-image publicId="coast.jpg" >
<cld-transformation width="200" height="200" crop="fill" />
<cld-transformation effect="sepia:100" />
<cld-transformation :overlay="sample_watermark" width="150" />
<cld-transformation radius="max" />
</cld-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)