1. Products
  2.   Image
  3.   JavaScript
  4.   pixelmatch
 
  

Open Source JavaScript API to Compare Images

JavaScript Library enables Software programmers to compare two images in multiple environments like Node or browsers etc.

Sometimes it is required to compare two images to see how similar they are. It is a very complicated process and required good knowledge to accomplish it. The open source pixelmatch library can be a very useful choice for comparing two images in any environment. As the library has no dependencies and works on raw typed arrays of image data, so can be used in multiple environments like Node or browsers, etc.

The pixelmatch is very small in size and very simple to use but is a very fast pixel-level image comparison library. It is written in JavaScript and initially created to compare screenshots in tests. The library supports features like anti-aliased pixels detection and perceptual color difference metrics.

Anti-aliasing detection is a very useful feature because usually it has been observed that rendering the same data on different applications, devices, or operating systems can generate slightly dissimilar results. But mostly it is recommended to ignore these small differences or tests to capture more meaningful data.

Previous Next

Getting Started with pixelmatch

The recommended way to install pixelmatch is via NPM. Please use the following command to install it.

Install pixelmatch via NPM

 npm install pixelmatch

What is Pixel Match Testing?

If you need to compare two images to check if there is any difference between then you can use pixel match testing for this purpose. There can be two types of images, the original image, and the modified image. You can use an application that can fetch images from the screenshot of your app and after that, the image comparison library can be used to compare these images and display the results.

Comparing Images via JavaScript Library

The open source library pixelmatch has provided complete functionality for comparing images inside JavaScript applications with ease. Software developers need to provide image data for comparison as well as the output place where it needs to write the image data with the differences. They also need to provide the dimension which is the width and height of the three images. You can use the threshold option that allows the images to be slightly different, which can be great in some cases. Please note that pixelmatch library needs that images must be of the same sizes.

Images Comparison Online via JavaScript API

 const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);

pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

diffContext.putImageData(diff, 0, 0);

Compare Images in Node.js via pixelmatch

 const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');

const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});

pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

fs.writeFileSync('diff.png', PNG.sync.write(diff));
 English