How to add watermark to an image in nodejs. I am using loopback framework and I want to add a watermark to every image uploaded,I tried a couple of image processing modules but couldnt implement a watermark.

I tried the image-watermark library with the code :

watermark.embedWatermark('./server/storage/images/img_hkd.jpg', { 'text': 'sample watermark' });

But I am getting this error : Error: spawn identify ENOENT

How to add watermark to an image in nodejs. I am using loopback framework and I want to add a watermark to every image uploaded,I tried a couple of image processing modules but couldnt implement a watermark.

I tried the image-watermark library with the code :

watermark.embedWatermark('./server/storage/images/img_hkd.jpg', { 'text': 'sample watermark' });

But I am getting this error : Error: spawn identify ENOENT

• javascript
• node.js
• express
• loopbackjs

• this worked for me npmjs./package/image-watermark – kawadhiya21 Commented Feb 10, 2017 at 11:48
• I tried this, but I am getting this error :"spawn identify ENOENT" – nikhil.g777 Commented Feb 10, 2017 at 11:51
• It might be using a directory which might not be available. – kawadhiya21 Commented Feb 10, 2017 at 12:08
• the image exists in the given path, I checked it. If image is not available, it gives an image not found error – nikhil.g777 Commented Feb 10, 2017 at 12:26

3 Answers 3

Instead of watermark use jimp module. It worked for me.

let imgActive = 'active/image.jpg';

Jimp.read('raw/originalimage.png')
      .then((tpl) => tpl.clone().write(imgActive))
      .then(() => Jimp.read(imgActive))
      .then((tpl) =>
          Jimp.read('raw/logo.png').then((logoTpl) => {
              logoTpl.opacity(0.2)
              return tpl.posite(logoTpl, 512, 512, [Jimp.BLEND_DESTINATION_OVER])
          }),
      )
      .then((tpl) => tpl.write('raw/watermark.png'))
    }

Just use a package, I've used imaginary without any issue.

//Install
npm install imaginary --save

//Import 
var fs = require('fs')
var imaginary = require('imaginary')
var serverUrl = 'localhost:8080'

imaginary('myImage.jpg')
  .server(serverUrl)
  .watermark({ text: 'copyright' })
  .on('error', function (err) {
    console.error('Cannot resize the image:', err)
  })
  .pipe(fs.createWriteStream('markedImage.jpg'))

https://github./h2non/node-imaginary

Package sharp can do this, and it works for two images or one image and text with font and other style, rotating and blurring, for reference

watermark an image with a logo： const sharp = require("sharp");

async function positeImages() {
  try {
    await sharp("underwater.png")
      .posite([
        {
          input: "sammy-transparent.png",
          top: 50,
          left: 50,
        },
      ])
      .toFile("sammy-underwater.png");
  } catch (error) {
    console.log(error);
  }
}

positeImages()

Adding Text on an Image：

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp("sammy.png")
      .posite([
        {
          input: svgBuffer,
          top: 0,
          left: 0,
        },
      ])
      .toFile("sammy-text-overlay.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

reference: https://www.digitalocean./munity/tutorials/how-to-process-images-in-node-js-with-sharp