The phrase “convolution matrix” sounds a bit scary if you are not familiar with the topic but it is actually a very simple concept to understand and extremely powerful. The process is best explained with a diagram.

On the left is a grid of pixels representing a section of a digital image, on the right is the new value for the centre pixel, and the two centre grids show how the new value is calculated.

To obtain the new value for the centre pixel, which is currently 128, we multiply each of the values in the grid by its corresponding value in the kernel matrix. The results are shown in the Products matrix. These nine values are then added to give a final value, and the process repeated for every pixel in the image. If the result is outside the 0–255 range then 0 or 255 are used.

I have used greyscale for simplicity but RGB images work in the same way, just with three times as many values.

Each kernel has a certain effect on the image, for example sharpening or blurring. I will show a few well-known ones in the code.

#image-processing #web-development #nodejs #jimp #javascript