Node.js OpenCV: Converting an image to grey scale

Introduction

In this tutorial we will learn how to convert an image to grey scale, using the opencv4nodejs package.

For an introductory tutorial on this Node.js package, please check here. For the installation instructions, please check here.

How to convert an image to grey scale

We will start the code by loading the opencv4nodejs module.

const cv = require('opencv4nodejs');

After that, we will read an image from the file system with a call to the imread function. This will be the image that we will convert to grey scale.

Recall from the previous tutorial that this function receives as input a string with the path to the image and it will return a Mat object representing the image.

Before running the code, don’t forget to change the path below to point to a file on your machine.

const originalImage = cv.imread('C:/Users/N/Desktop/Test.jpg');

Then, to convert the image to grey scale, we simply need to call the bgrToGray method on our Mat object. This method takes no arguments and it returns as output another object of class Mat with the grey scale image.

const grayImage = originalImage.bgrToGray();

After this we will display the grey scale image in a window with a call to the imshow function.

cv.imshow('Grey Image', grayImage);

We will also show the original image, for comparison.

cv.imshow('Original Image', originalImage);

Note that in the previous tutorial we have used the imshowWait function instead of the imshow. When we use the imshowWait function, it will wait for a click in the keyboard to continue the program execution.

Nonetheless, if we want to show two distinct windows, then the first call to the imshowWait would block waiting for a keyboard click and only then it would show the second image.

To avoid this, we use the imshow function instead to open as many windows as we want and at the end we call the waitKey function, which will block the execution until we click in some key.

Note that the waitKey function takes no arguments.

cv.waitKey();

The final code can be seen below.

const cv = require('opencv4nodejs');

const originalImage = cv.imread('C:/Users/N/Desktop/Test.jpg');

const grayImage = originalImage.bgrToGray();

cv.imshow('Grey Image', grayImage);
cv.imshow('Original Image', originalImage);

cv.waitKey();

Testing the code

To test the code, run it on a tool of your choice. I’ll be using Visual Studio Code with the Code Runner extension.

You should get an output similar to figure 1. As can be seen, both the grey scale and the original images are shown in two distinct windows. Upon clicking a keyboard key, both should close.