Add a watermark to a photo in JavaScript (video tutorial)

Overview

Learn how to protect your visual content from unauthorized use by adding watermarks to images using Cloudinary's JavaScript SDK. This tutorial demonstrates two approaches: applying image overlays (like logos) and text overlays (like "Preview" or copyright notices) to safeguard your content.

Whether you're building a stock photo website, protecting client proofs, or adding branding to your images, watermarks are an essential tool. Cloudinary's overlay method makes it simple to add, position, and customize watermarks with just a few lines of code.

For more information on overlays, see Placing layers on images.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction: Why watermarks matter

0:00	Watermarks are an essential tool for safeguarding your visual content from unauthorized use. Learn how to protect your images or videos so others can't use them without your consent, and explore how Cloudinary's JavaScript SDK simplifies this process.

Real-world example: Watermarks in action

0:27	See how platforms like Unsplash use watermarks to protect premium content. In today's digital age, where sharing and accessing visual content has become effortless, ensuring the protection of your creative work is of paramount importance. Watermarks step in as a reliable solution, establishing content authenticity while discouraging unauthorized distribution.

Getting started with Cloudinary's JavaScript SDK

0:58	Dive into the functionality of Cloudinary's JavaScript SDK. This tutorial works with two distinct images: applying an image overlay to the first and a text overlay to the second, demonstrating the flexibility of the overlay method.

Implementing an image overlay watermark

1:07	Start by focusing on the image overlay approach. Learn how to use Cloudinary's overlay() method to add an image source from your Cloudinary account. The image is initially set at 300 pixels by 300 pixels for better visibility. See how to attach a source to the overlay method, which can be either an image or text.

Resizing the watermark icon

1:35	The Cloudinary icon is a bit large for a watermark, so learn how to resize it to fit snugly. Initiate a new transformation and use the scale option to resize the watermark, setting the height to 55 pixels for optimal visibility without overwhelming the image.

Positioning the watermark

1:54	Position the watermark by creating a new position object that determines its location through compass direction gravity. Choose south_east to place the watermark in the lower right corner of the image, a common position for watermarks that doesn't obstruct the main content.

Example code for adding an image overlay watermark:

Adding a text overlay watermark

2:07	Explore adding text as an overlay. Use the overlay method and designate text as the source, then input your preferred text. For this example, the word "Preview" is used, but you can use any text like copyright notices or branding.

Styling the text watermark

2:21	Refine the text watermark's appearance by selecting a font and text size (Arial 60). For a more stylized look reminiscent of a stock image watermark, bold the text using font weight and adjust the text color to a subdued gray tone for a professional appearance.

Adding opacity for subtle watermarks

2:40	Introduce the opacity attribute by creating a new transformation to control transparency. Adjust the opacity and set it to 70% to create a subtle watermark that protects content without being too obtrusive. This transparency effect is perfect for maintaining image aesthetics while ensuring protection.

Example code for adding a text overlay watermark with styling:

Summary: Watermarking made easy

3:03

Incorporating watermarks into your images is a breeze using the overlay method from Cloudinary's JavaScript SDK. Use either text or image as the source. For images, provide the path to a chosen Cloudinary asset, resize it, and position it. For text, customize with font weight, color, and add transparency effects. Just like that, you've successfully applied watermarks to protect your visual content.

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.