pixelmatch

The smallest, simplest and fastest JavaScript pixel-level image comparison library, primarily designed to be used in regression tests that compare screenshots.

Features anti-aliased pixels detection and perceptual color metrics.

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

var numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, 800, 600);

API

pixelmatch(img1, img2, output, width, height[, threshold, includeAA])

• img1, img2 — Image data of the images to compare (Buffer or Uint8Array).
• output — Image data to write the diff to.
• width, height — Width and height of the images. Note that all three images need to have the same dimensions.
• threshold — Matching threshold, ranges from 0 to 1. Smaller values make the comparison more sensitive. 0.005 by default.
• includeAA — If true, disables detecting and ignoring anti-aliased pixels. false by default.

Compares two images, writes the output diff and returns the number of mismatched pixels.

Command line

Pixelmatch comes with a binary that works with PNG images:

pixelmatch image1.png image2.png output.png 0.005

Install

Install with NPM:

npm install pixelmatch

To build a browser-compatible version, clone the repository locally, then run:

npm install -g browserify
browserify -s pixelmatch index.js > pixelmatch.js

Example output

expected	actual	diff

Changelog