Some of you may have heard of the article recently published On the Effectiveness of Visible Watermarks, showing that watermarks that are consistently used can actually be removed automatically. As this is a concern for many of our customers, we came up with Removal Resistant Watermarks.
This effect smartly and randomly modifies image overlays in order to make the watermarks visible yet much harder to remove.
Running the effect: e_anti_removal generates a different result for each execution even if the transformation is the same. The effect accepts a level parameter: e_anti_removal:[level] between 0-100, with the default level being 50:
With a regular watermark:
Ruby:
cl_image_tag("coast.jpg", :transformation=>[
{:width=>500, :crop=>"scale"},
{:overlay=>"cloudinary_icon", :width=>200, :effect=>"brightness:200", :opacity=>60}
])
PHP v1:
cl_image_tag("coast.jpg", array("transformation"=>array(
array("width"=>500, "crop"=>"scale"),
array("overlay"=>"cloudinary_icon", "width"=>200, "effect"=>"brightness:200", "opacity"=>60)
)))
PHP v2:
(new ImageTag('coast.jpg'))
->resize(Resize::scale()->width(500))
->overlay(
Overlay::source(Source::image('cloudinary_icon')
->transformation((new ImageTransformation())
->resize(Resize::scale()->width(200))
->adjust(Adjust::opacity(60))
->adjust(Adjust::brightness()->level(200))
)));
Python:
CloudinaryImage("coast.jpg").image(transformation=[
{'width': 500, 'crop': "scale"},
{'overlay': "cloudinary_icon", 'width': 200, 'effect': "brightness:200", 'opacity': 60}
])
Node.js:
cloudinary.image("coast.jpg", {transformation: [
{width: 500, crop: "scale"},
{overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60}
]})
Java:
cloudinary.url().transformation(new Transformation()
.width(500).crop("scale").chain()
.overlay(new Layer().publicId("cloudinary_icon")).width(200).effect("brightness:200").opacity(60)).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {transformation: [
{width: 500, crop: "scale"},
{overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 200, effect: "brightness:200", opacity: 60}
]}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {transformation: [
{width: 500, crop: "scale"},
{overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 200, effect: "brightness:200", opacity: 60}
]})
React:
<Image publicId="coast.jpg" >
<Transformation width="500" crop="scale" />
<Transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60" />
</Image>
Vue.js:
<cld-image publicId="coast.jpg" >
<cld-transformation width="500" crop="scale" />
<cld-transformation :overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60" />
</cld-image>
Angular:
<cl-image public-id="coast.jpg" >
<cl-transformation width="500" crop="scale">
</cl-transformation>
<cl-transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(500).Crop("scale").Chain()
.Overlay(new Layer().PublicId("cloudinary_icon")).Width(200).Effect("brightness:200").Opacity(60)).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.width(500).crop("scale").chain()
.overlay(new Layer().publicId("cloudinary_icon")).width(200).effect("brightness:200").opacity(60)).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(500).setCrop("scale").chain()
.setOverlay("cloudinary_icon").setWidth(200).setEffect("brightness:200").setOpacity(60)).generate("coast.jpg")!, cloudinary: cloudinary)
With a Removal Resistant Watermark at the default value (50):
Ruby:
cl_image_tag("coast.jpg", :transformation=>[
{:width=>500, :crop=>"scale"},
{:overlay=>"cloudinary_icon", :width=>200, :effect=>"brightness:200", :opacity=>60},
{:effect=>"anti_removal:50"},
{:flags=>"layer_apply"}
])
PHP v1:
cl_image_tag("coast.jpg", array("transformation"=>array(
array("width"=>500, "crop"=>"scale"),
array("overlay"=>"cloudinary_icon", "width"=>200, "effect"=>"brightness:200", "opacity"=>60),
array("effect"=>"anti_removal:50"),
array("flags"=>"layer_apply")
)))
PHP v2:
(new ImageTag('coast.jpg'))
->resize(Resize::scale()->width(500))
->overlay(
Overlay::source(Source::image('cloudinary_icon')
->transformation((new ImageTransformation())
->resize(Resize::scale()->width(200))
->adjust(Adjust::opacity(60))
->adjust(Adjust::brightness()->level(200))))
->blendMode(BlendMode::antiRemoval(50))
);
Python:
CloudinaryImage("coast.jpg").image(transformation=[
{'width': 500, 'crop': "scale"},
{'overlay': "cloudinary_icon", 'width': 200, 'effect': "brightness:200", 'opacity': 60},
{'effect': "anti_removal:50"},
{'flags': "layer_apply"}
])
Node.js:
cloudinary.image("coast.jpg", {transformation: [
{width: 500, crop: "scale"},
{overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60},
{effect: "anti_removal:50"},
{flags: "layer_apply"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.width(500).crop("scale").chain()
.overlay(new Layer().publicId("cloudinary_icon")).width(200).effect("brightness:200").opacity(60).chain()
.effect("anti_removal:50").chain()
.flags("layer_apply")).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {transformation: [
{width: 500, crop: "scale"},
{overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 200, effect: "brightness:200", opacity: 60},
{effect: "anti_removal:50"},
{flags: "layer_apply"}
]}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {transformation: [
{width: 500, crop: "scale"},
{overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 200, effect: "brightness:200", opacity: 60},
{effect: "anti_removal:50"},
{flags: "layer_apply"}
]})
React:
<Image publicId="coast.jpg" >
<Transformation width="500" crop="scale" />
<Transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60" />
<Transformation effect="anti_removal:50" />
<Transformation flags="layer_apply" />
</Image>
Vue.js:
<cld-image publicId="coast.jpg" >
<cld-transformation width="500" crop="scale" />
<cld-transformation :overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60" />
<cld-transformation effect="anti_removal:50" />
<cld-transformation flags="layer_apply" />
</cld-image>
Angular:
<cl-image public-id="coast.jpg" >
<cl-transformation width="500" crop="scale">
</cl-transformation>
<cl-transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60">
</cl-transformation>
<cl-transformation effect="anti_removal:50">
</cl-transformation>
<cl-transformation flags="layer_apply">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(500).Crop("scale").Chain()
.Overlay(new Layer().PublicId("cloudinary_icon")).Width(200).Effect("brightness:200").Opacity(60).Chain()
.Effect("anti_removal:50").Chain()
.Flags("layer_apply")).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.width(500).crop("scale").chain()
.overlay(new Layer().publicId("cloudinary_icon")).width(200).effect("brightness:200").opacity(60).chain()
.effect("anti_removal:50").chain()
.flags("layer_apply")).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(500).setCrop("scale").chain()
.setOverlay("cloudinary_icon").setWidth(200).setEffect("brightness:200").setOpacity(60).chain()
.setEffect("anti_removal:50").chain()
.setFlags("layer_apply")).generate("coast.jpg")!, cloudinary: cloudinary)
For more details, see Anti-removal overlays in the documentation.