How to combine two bitmap patterns using Node Jimp Blit Function?

This NodeJS – Blit() is an inbuilt function that is used to combine two bitmap patterns. It can also be used for combining several bitmaps into one using a boolean function.

Syntax

blit(src, x, y, [srcx, srcy, srcw, srch])

Definition of blit() paramters

• src – It will store the source image for blit.

• x – It will take input for x to blit the image.

• y – It will take input for y to blit the image.

• srcx – It is an optional parameter that will take the x-position to crop the source image.

• srcy – It is an optional parameter that will take the y-position to crop the source image.

• srcw – It is an optional parameter that will take the width to crop the source image.

• srch - It is an optional parameter that will take the height to crop the source image.

Input Image

Using Node JIMP – BLIT()

Before proceeding to use blit() 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 a blit.js file and copy-paste the following code snippet in it.

• Use node blit.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 blit() { // Function name is same as of file name
   // Reading Image
   const image1 = await Jimp.read
   ('/home/jimp/tutorials_point_img.jpg');
   const image2 = await Jimp.read
   ('/home/jimp/tutorials_point_img.jpg');
   image1.blit(image2, 100, 150)
   .write('/home/jimp/blit.jpg')
}

blit(); // Calling the function here using async
console.log("Image is processed successfully");

Output

Using Node JIMP – Blit() with Optional parameters

Example

const Jimp = require('jimp') ;

async function blit() {
   // Reading Image
   const image1 = await Jimp.read
   ('/home/jimp/tutorials_point_img.jpg');
   const image2 = await Jimp.read
   ('/home/jimp/tutorials_point_img.jpg');
   image1.blit(image2, 70, 100, 130, 30, 440, 80)
   .write('/home/jimp/blit.jpg')
}

blit();
console.log("Image is processed successfully");

Output