How to compare two images using Node.js

Question

I am looking for a way to compare two images to see how similar they are. Googling it produces tons of image processing results (cropping, re-sizing, etc.), but nothing that would do approximate comparisons of images. There is one Node.js library, but it is version 0.0.1 and relies on various 3rd party system packages, so not stable or portable.

Something along these lines:

var imgComparator = require('some-awesome-image-comparator-module');
// result would be between 1.0 and 0.0, where 1.0 would mean exact match
var result = imgComparator.compare('/path/to/image/1.png', '/path/to/image/2.png');

score 16 · Accepted Answer · edited May 23 '17 at 11:45

16

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

edited May 23 '17 at 11:45

Community

1
1

answered Aug 30 '13 at 11:46

moka

22,846
4
51
67

score 13 · Answer 2 · answered Jun 18 '15 at 17:07

13

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

answered Jun 18 '15 at 17:07

Linus Unnebäck

23,234
15
74
89

3

does this require the images be identical? I'm looking to compare if two images are similar. ie: same photo of same building, but slightly different because its not the same photo. – chovy Mar 22 '16 at 09:04
fwiw, image-diff is a thin wrapper around imagemagick/graphicsmagick's `compare` tool. – mrm Apr 24 '17 at 00:52
8

Deprecated in favor of [looks-same](https://github.com/gemini-testing/looks-same) and [pixelmatch](https://github.com/mapbox/pixelmatch). – krulik Sep 17 '17 at 10:20

score 8 · Answer 3 · answered Nov 15 '19 at 08:27

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

But pixel match is working only with PNG, I have a similar issue with the author, I need to compare 2 jpg images with using nodeJS, and pixel match doesn't work for this... — Gintars Lazda, Dec 19 '20 at 11:05
You can use [`sharp`](https://www.npmjs.com/package/sharp) to convert from different formats to a PNG/PNG buffer — marsnebulasoup, Jul 04 '21 at 22:40

score 3 · Answer 4 · answered May 09 '14 at 12:20

3

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

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

answered May 09 '14 at 12:20

Dan

55,715
40
116
154

Please keep me up to date, because I did not make it work yet :). – Dan May 09 '14 at 18:37
There's an example of how to use the lib in "bin/imagediff". Use the save version of the canvas module as imagediff, the newest one seems to be incompatible. Read the manual of how to install canvas and cairo. I got stuck a long time because I missed that I needed to add a folder to my PATH. – luff Jun 07 '14 at 20:32

How to compare two images using Node.js

4 Answers4

Linked