What is pixelmatch?
The pixelmatch npm package is a high-performance, zero-dependency library for comparing two images. It is primarily used to find differences between images in terms of pixels, making it highly useful for tasks such as visual regression testing, automated testing of graphics or rendering engines, and anywhere else where image differences need to be quantified programmatically.
What are pixelmatch's main functionalities?
Image comparison
This feature allows you to compare two images and find the number of pixels that differ between them. The `img1` and `img2` parameters are the image data of the two images to compare, `diff` is a Uint8Array or Uint8ClampedArray to store the diff output, `width` and `height` specify the dimensions of the images, and the `threshold` option in the options object allows you to specify the sensitivity of the comparison.
const numDiffPixels = pixelmatch(img1, img2, diff, width, height, {threshold: 0.1});
Customizable comparison
Beyond basic image comparison, pixelmatch allows for customization of the comparison process. The `includeAA` option, for example, can be set to false to exclude anti-aliased pixels from being considered as differences. This is useful for comparing images where anti-aliasing may vary but is not considered a significant difference.
const numDiffPixels = pixelmatch(img1, img2, diff, width, height, {threshold: 0.1, includeAA: false});
Other packages similar to pixelmatch
resemblejs
Resemble.js is a package similar to pixelmatch that analyzes and compares images with a focus on visual differences. It provides more detailed analysis options, such as the ability to ignore colors or to get a percentage of image similarity. However, it might be heavier in terms of dependencies compared to the lightweight nature of pixelmatch.
looks-same
Looks-same is another npm package that offers image comparison capabilities. It focuses on flexibility, offering features like tolerance to color and antialiasing differences. Compared to pixelmatch, looks-same provides a higher-level API that might be more accessible to some users, but potentially at the cost of lower-level control and performance.
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 metrics.
Inspired by Resemble.js
and Blink-diff.
Unlike these libraries, pixelmatch is around 90 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, img2, diff, 800, 600, {threshold: 0.1});
Example output
API
pixelmatch(img1, img2, output, width, height[, options])
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.
options
is an object literal with the following properties:
threshold
— Matching threshold, ranges from 0
to 1
. Smaller values make the comparison more sensitive. 0.1
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.1
Example usage
Node.js
var fs = require('fs'),
PNG = require('pngjs2').PNG,
pixelmatch = require('pixelmatch');
var img1 = fs.createReadStream('img1.png').pipe(new PNG()).on('parsed', doneReading);
var img2 = fs.createReadStream('img2.png').pipe(new PNG()).on('parsed', doneReading);
function doneReading() {
if (!img1.data || !img2.data) return;
var diff = new PNG({width: img1.width, height: img1.height});
pixelmatch(img1.data, img2.data, diff.data, img1.width, img1.height, {threshold: 0.1});
diff.pack().pipe(fs.createWriteStream('diff.png'));
}
Browsers
var img1 = img1Ctx.getImageData(0, 0, width, height),
img2 = img2Ctx.getImageData(0, 0, width, height),
diff = diffCtx.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffCtx.putImageData(diff, 0, 0);
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