How to Watermark Images using Nodejs

If you're a beginner in the world of image editing, adding watermarks to your images can seem like a daunting task. However, with the right tools and techniques, it can be a relatively straightforward process.

In this article, I will explain how to watermark images using Jimp, a powerful image-processing library for Node.js.

Before we dive into the details, let me first define what a watermark is. A watermark is a text or image that is superimposed on an image to protect its copyright and ownership. Watermarks are used by photographers, graphic designers, and other creators to protect their work from unauthorized use.

Jimp is a JavaScript image processing library that allows you to perform various operations on images, such as resizing, cropping, and adding watermarks. To get started, you will need to install Jimp on your system. You can do this by running the following command in your terminal:

npm install jimp

Once you have installed Jimp, you can start using it to add watermarks to your images. Here's a step-by-step guide to help you get started:

Step 1: Load the image

The first step is to load the image you want to watermark using the Jimp library. You can do this by creating a new instance of the Jimp class and passing the path of the image file as an argument. Here's an example:

const Jimp = require('jimp');

async function waterMarker(){
const readImage = Jimp.read('path/to/image.jpg')
const watermarkText = "Watermark Text";    
const angleOfRotation = 45;

    try {


    const font = await jimp.loadFont(jimp.FONT_SANS_64_WHITE)

// Creates a blank black image        
const image2 = new jimp(read.bitmap.width, read.bitmap.height, "black")
// Applies the watermark across the width and lenght of the image
        for (let i = 0; i < read.bitmap.height; i +=         (font.info.size * (watermarkText.length + 1))) {
            for (let j = 0; j < read.bitmap.width; j += (font.info.size * 2)) {
                image2.print(font, i, j, watermarkText) }        }
        image2.blur(3).rotate(angleOfRotation).opacity(0.3)
        read
            .composite(image2, 0, 0)
            .write(`path/to/image.png`)


    } catch (err) {
      console.log(err.message)
}

In this example, we're creating a new instance of the Jimp class to create a black rectangle with a width and height equal to that of the original image. We're then using the print() method to add the text "Watermark Text" to the watermark. We're using the loadFont() method to load the default sans-serif font with a size of 64 pixels, and we're centering the text horizontally and vertically using the alignmentX and alignmentY options.

We're then using the composite() method of the Jimp class to overlay the watermark onto the original image. The composite() method takes the watermark image, the x and y coordinates where you want to place the watermark, and the mode you want to use to blend the images together.

And that is it.

Hurray! You have just created your water marking algorithm!