Cloudinary Cookbook recipes about Watermark

Adding watermarks as an overlay

Add your watermark as an overlay on top of any image by setting the overlay parameter (l in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.

Overlaying

Scale and position

Semi-transparent

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon/envelope.jpg

Ruby:

cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")

PHP:

cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))

Python:

CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")

Node.js:

cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})

Java:

cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).imageTag("envelope.jpg");

JS:

cloudinary.imageTag('envelope.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon")}).toHtml();

jQuery:

$.cloudinary.image("envelope.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon")})

React:

<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>

Angular:

<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon"))).BuildImageTag("envelope.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).generate("envelope.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon")).generate("envelope.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jun 15, 2014

Tags: