Learn how to add watermark(logo/text) over image in nodejs.

0
how-to-add-watermark-image-nodejs
how-to-add-watermark-image-nodejs

Dynamic Watermark is npm watermark module to add logo watermark to an image. It can add an image as well as text watermark on given positions. This node module has features like we can provide the type of watermark for eg: image or text watermark, logo position in pixels etc. This tutorial will help you to add watermark in nodejs to image.

In this tutorial, we are going to create an example in nodejs and we are using dynamic-watermark module to add watermark to the image. At the end of the tutorial, you will have a clear understanding of the example to add watermark in nodejs.

Let’s get started by creating nodejs application.

mkdir watermark-example
cd watermark-example
create sample application.
npm init -y
It will create package.json file for us and it will look like this.
{
    "name": "watermark-example",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "Navjot Dhanawat <navjotdhanawat@gmail.com> (http://www.navjotdhanawat.com)",
    "license": "ISC"
}
Dynamic watermark package installation:
npm install dynamic-watermark --save
Install other dependencies for our nodejs app.
npm install --save express body-parser method-override

 

Create index.js file inside our project directory.
touch index.js
After creating nodejs server our index.js file will look like this.
var express = require('express');
var wm = require('./');
var app = express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var port = process.env.PORT || 8080;

app.use(bodyParser.urlencoded({ 'extended': 'true' }));
app.use(bodyParser.json());
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
app.use(methodOverride('X-HTTP-Method-Override'));
app.get('/add-watermark', function (req, res) {

    var optionsImageWatermark = {
        type: "image", // Type 
        source: "source.jpg", // Source image file 
        logo: "logo.jpg", // This is optional if you have provided text Watermark
        destination: "output.jpg",
        position: {
            logoX: 200,
            logoY: 200,
            logoHeight: 200,
            logoWidth: 200
        }
    };

    wm.embed(optionsImageWatermark, function (status) {
        //Do what you want to do here
        console.log(status);
        res.send({
            success: true
        });
    })
});

app.listen(port);
console.log("App listening on port " + port);

 

  • Put image file (jpg/png) in the same directory as our source file on which we are going to add watermark. In my case, I am using source.jpg image.
  • Put logo file (jpg/png) in the same directory as our logo file, which we are going to add as a watermark. In my case, I am using logo.png image.
Finally, our folder structure will look like this:
-package.json
-index.js
source.jpg
logo.jpg
We are done! Now its time to run our application.
node index.js

 

In this example we are having only server-side logic and we haven’t use any frontend. To test our code just open the browser and hit URL http://localhost:8080/add-watermark. You will get true in response if it will add watermark. Go to our project folder and you will see that output.jpg file is generated will watermark added to it. If you want to add Frontend then go for either react or angular and make HTTP call.

If you want to add this package to an existing project then follow these steps:

  1.  include dynamic-watermark package:
    var watermark = require('dynamic-watermark');
  2. Provide following options:
    var optionsImageWatermark = {
            type: "image", // Type 
            source: "source.jpg", // Source image file 
            logo: "logo.jpg", // This is optional if you have provided text Watermark
            destination: "output.jpg",
            position: {
                logoX: 200,
                logoY: 200,
                logoHeight: 200,
                logoWidth: 200
            }
        };
  3. The final step is to call embed method by passing above options.
    watermark.embed(optionsImageWatermark, function (status) {
            //Do what you want to do here
            console.log(status);
            res.send({
                success: true
            });
        })

If you are facing any issue then dont forget to open issue on GitHub. Open issues here

You have already voted.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.