How to overlay an image over another in Node Jimp?

The composite() method overlays an image over another Jimp image at the given x, y coordinates. The image will be placed at the given position of coordinates from where we can

Syntax

composite( src, x, y, [{ mode, opacitySource, opacityDest }] );

Definition of composite() paramters

• src – The src defines the source location of the file where this image is located. It can be a local location or a remote location.

• x, y – Coordinates that signify where to put the file.

• mode – You can define a mode here for the image. For example,Jimp.BLEND_SOURCE_OVER – This mode will try to blend the new image into old image.

• opacityDest – This will define the opacity of the destination image, i.e., the image on which this new image is placed.

• opacitySource – This will define the opacity of the source image, i.e., the opacity of the new image.

Input Image

Overlay Image

Using Node JIMP – GREYSCALE()

Before proceeding to use greyscale() functions, please check that the following statements are already executed for setting up the environment.

• npm init -y // Initialising the Node environment

• npm install jimp --save // Installing the jimp dependency

• Create an imageOverlay.js file and copy-paste the following code snippet in it.

• Use node imageOverlay.js to run the code.

Note − The method name should match with the JS file name. Only then it will be able to call the desired method.

Example

const Jimp = require('jimp') ; async function imageOverlay(imageOverlay) { // Function name is same as of file name // Reading watermark Image    let watermark = await Jimp.read(imageOverlay);    watermark = watermark.resize(150,150); // Resizing watermark image // Reading original image    const image = await Jimp.read('/home/jimp/tutorials_point_img.jpg');    watermark = await watermark    image.composite(watermark, 0, 0, {       mode: Jimp.BLEND_SOURCE_OVER,       opacityDest: 1,       opacitySource: 0.5    })    await image.writeAsync('/home/jimp/newImage.png'); } // Calling this function using async imageOverlay('/home/jimp/overlay_image.png'); console.log("Image is processed successfully");

Output