Node.js Project to Add Text or Image Watermark to Image File Using Watermark.js Library in Javascript Full Tutorial For Beginners

You are currently viewing Node.js Project to Add Text or Image Watermark to Image File Using Watermark.js Library in Javascript Full Tutorial For Beginners

 

Welcome folks today in this tutorial we will be building a watermark application where we will be adding text and image watermarks to the image file in javascript. All the source code of the application will be shown below.

 

 

 

Get Started

 

 

 

Now to get started you need to initialize your node.js project and install this library

 

npm init -y

 

This will initialize the empty package.json file and then you need to install watermarkjs library as shown below

 

npm i watermarkjs

 

After installing this make a index.html file and copy paste the following code

 

index.html

 

 

 

Here we are including the library watermark.min.js file for usage in browser side. You can make watermark.min.js file inside the root directory and copy paste the below code

 

watermark.min.js

 

 

 

After that when you run this index.html file inside the browser you will see the following result as follows

 

 

 

 

 

As you can see the text MyPhoto watermark has been added at the bottom right corner of the image

 

You can control the positioning by the different methods it supports for different positions. Here are the list

 

 

For bottom right position only

 

 

For Bottom left position only

 

 

Adding Image Watermark to image as shown below

 

Leave a Reply