Watermark Using Canvas

watermark.js

const { createCanvas, loadImage } = require('canvas');

const drawWatermarkAsBuffer = (pathOfSourceImageFile, pathOfWaterMarkImageFile, width, height) => {

  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext('2d');

  // loading the source image file
  return loadImage(pathOfSourceImageFile).then(loadSourceImage => {

    // drawing the source file into canvas
    ctx.drawImage(loadSourceImage, 0, 0, width, height);

    // loading the watermark image file
    return loadImage(pathOfWaterMarkImageFile).then(loadWatermarkImage => {

      // drawing the watermark image over the source image
      ctx.drawImage(loadWatermarkImage, 0, 0, width, height);

      return canvas.toBuffer();
    });
  });
}

module.exports = {
  drawWatermarkAsBuffer
}

thank you hahah, berry useful

I hardcoded a few things, and lowered opacity for the watermark.

const { createCanvas, loadImage } = require("canvas");

const drawWatermarkAsBuffer = async (
  pathOfSourceImageFile,
  pathOfWaterMarkImageFile,
  width,
  height
) => {
  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext("2d");
  ctx.globalAlpha = 1;

  // loading the source image file
  const loadSourceImage = await loadImage(pathOfSourceImageFile);
  // drawing the source file into canvas
  ctx.drawImage(loadSourceImage, 0, 0, width, height);
  ctx.globalAlpha = 0.5;
  const loadWatermarkImage = await loadImage(pathOfWaterMarkImageFile);
  // drawing the watermark image over the source image
  //                                x    y    w    h
  ctx.drawImage(loadWatermarkImage, 987, 427, 300, 300);
  return canvas.toBuffer();
};

module.exports = {
  drawWatermarkAsBuffer,
};