How to compare two images using Node.js

There is node-opencv module, you might use it in order to perform heavy operation like image comparison. Good topic on that is here: Simple and fast method to compare images for similarity


There is also image-diff which looks very promising, it's made by Uber.

var imageDiff = require('image-diff')

imageDiff({
  actualImage: 'checkerboard.png',
  expectedImage: 'white.png'
}, function (err, imagesAreSame) {
  // error will be any errors that occurred
  // imagesAreSame is a boolean whether the images were the same or not
  // diffImage will have an image which highlights differences
})

image-diff is deprecated.

From their github:

We no longer have any active maintainers on this project and as a result have halted maintenance.

As a replacement, please see alternative projects like looks-same and pixelmatch:

https://github.com/gemini-testing/looks-same

https://github.com/mapbox/pixelmatch

I personally use pixelmatch:

The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests.

Features accurate anti-aliased pixels detection and perceptual color difference metrics.

Inspired by Resemble.js and Blink-diff. Unlike these libraries, pixelmatch is around 150 lines of code, has no dependencies, and works on raw typed arrays of image data, so it's blazing fast and can be used in any environment (Node or browsers).

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});

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

fs.writeFileSync('diff.png', PNG.sync.write(diff)); // see diff.png for the difference

const compatibility = 100 - dif * 100 / (width * height);
console.log(`${difference} pixels differents`);
console.log(`Compatibility: ${compatibility}%`);

Find a demo here: https://observablehq.com/@mourner/pixelmatch-demo

https://github.com/mapbox/pixelmatch


I have found this library, which may be useful for you

https://github.com/HumbleSoftware/js-imagediff