Skip to content
The smallest, simplest and fastest JavaScript pixel-level image comparison library
Branch: master
Clone or download
ebutleratlassian and mourner Update README.md (#65)
Just fixing a comma/semicolon typo.
Latest commit 577f336 Jul 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin minor clean up of CLI code Jun 6, 2019
test more robust error handling Jun 7, 2019
.gitignore more test fixtures Oct 18, 2015
.travis.yml update travis node version Jan 30, 2019
LICENSE upgrade to ES6 syntax; simplify with sync read/write Jun 6, 2019
README.md Update README.md (#65) Jul 11, 2019
index.js fix input validation for some Jest environments Jun 10, 2019
package.json 5.0.2 Jun 10, 2019

README.md

pixelmatch

Build Status

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 numDiffPixels = pixelmatch(img1, img2, diff, 800, 600, {threshold: 0.1});

Implements ideas from the following papers:

Demo

Example output

expected actual diff
1diff
1diff
1diff

API

pixelmatch(img1, img2, output, width, height[, options])

  • img1, img2 — Image data of the images to compare (Buffer, Uint8Array or Uint8ClampedArray). Note: image dimensions must be equal.
  • output — Image data to write the diff to, or null if don't need a diff image.
  • 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.
  • alpha — Blending factor of unchanged pixels in the diff output. Ranges from 0 for pure white to 1 for original brightness. 0.1 by default.
  • aaColor — The color of anti-aliased pixels in the diff output in [R, G, B] format. [255, 255, 0] by default.
  • diffColor — The color of differing pixels in the diff output in [R, G, B] format. [255, 0, 0] 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

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

Browsers

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

Install

Install with NPM:

npm install pixelmatch

Use in the browser from a CDN:

<script src="https://bundle.run/pixelmatch@5.0.2"></script>

Changelog

You can’t perform that action at this time.