Add Watermarks to Images using Cloudinary

Intro

Watermarks are an essential tool for safeguarding your visual content from unauthorized use. They are unique images or patterns that you embed into your files to establish ownership. 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. This is where watermarks step in as a reliable solution. By seamlessly integrating identifying images or text overlays, watermarks not only establish your content's authenticity but also discourage unauthorized distribution.

This blog post goes over the material covered in this YouTube video. For a better experience, watch there.

But for now, let's dive into the functionality of Cloudinary's JavaScript SDK.

Tutorial

We'll be working on two distinct images. We'll apply an image overlay to the top image and a text overlay to the bottom image. Let's start by focusing on the image overlay for the top image.

The image is initially set at 300px by 300px for better visibility. To incorporate the overlay, Cloudinary provides the overlay method, to which we attach the source. The source can be an image or text. In this instance, we're choosing an image from our Cloudinary account, specifically the Cloudinary icon located in the samples folder.

myImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      image('samples/cloudinary-icon')

However, the icon is a bit large for a watermark, so we need to resize it to fit snugly in the bottom-right corner. We'll initiate a new Transformation and use the scale option to resize it, setting the height to 55 pixels. To position it, we'll create a new Position(), determining its location through the compass direction in gravity. We've opted for south_east, placing it in the lower-right corner.

myImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      image('samples/cloudinary-icon')
        .transformation(new Transformation()
          .resize(scale().height(55))
        )
    )
      .position(new Position().gravity(compass('south_east')))
  )

Now, let's explore adding text as an overlay. Similarly, we'll use the overlay method and designate text as the source. We can input our preferred text; for this example, I'll use the word PREVIEW. To refine its appearance, we'll select a font and text size: 'arial', 60. For a more stylized look reminiscent of stock images, we'll bold the text using the fontWeight property and adjust the textColor to a subdued gray tone.

mySecondImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      text('PREVIEW', new TextStyle('arial', 60)
        .fontWeight('bold'))
        .textColor('gray')
    )
  )

To ensure a degree of transparency, allowing the underlying image to show through, we'll introduce the opacity attribute. We'll create a new Transformation() to control this opacity, where we will adjust this opacity and set it to 70%. And just like that, you've successfully applied watermarks to your images.

mySecondImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      text('PREVIEW', new TextStyle('arial', 60)
        .fontWeight('bold'))
        .textColor('gray')
        .transformation(new Transformation().adjust(opacity(70)))
    )
  )

Incorporating watermarks into your images is a breeze using the overlay method from Cloudinary's Javascript SDK. We were able to use either text or image as the source. When utilizing image, we provided the path to be a chosen Cloudinary image, resized it, and positioned the watermark at the bottom-right corner of the image.

For text, we used PREVIEW as our text and adjusted it’s presentation with fontWeight and textColor, a subtle transparency effect.