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:
- Measuring perceived color difference using YIQ NTSC transmission color space in mobile applications (2010, Yuriy Kotsarenko, Fernando Ramos)
- Anti-aliased pixel and intensity slope detector (2009, Vytautas Vyšniauskas)
expected | actual | diff |
---|---|---|
img1
,img2
— Image data of the images to compare (Buffer
,Uint8Array
orUint8ClampedArray
). Note: image dimensions must be equal.output
— Image data to write the diff to, ornull
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 from0
to1
. Smaller values make the comparison more sensitive.0.1
by default.includeAA
— Iftrue
, disables detecting and ignoring anti-aliased pixels.false
by default.alpha
— Blending factor of unchanged pixels in the diff output. Ranges from0
for pure white to1
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.diffColorAlt
— An alternative color to use for dark on light differences to differentiate between "added" and "removed" parts. If not provided, all differing pixels use the color specified bydiffColor
.null
by default.diffMask
— Draw the diff over a transparent background (a mask), rather than over the original image. Will not draw anti-aliased pixels (if detected).
Compares two images, writes the output diff and returns the number of mismatched pixels.
Pixelmatch comes with a binary that works with PNG | JPEG images:
PNG image
pixelmatch image1.png image2.png output.png 0.1
JPEG image
pixelmatch image1.jpg image2.jpg output.jpg 0.1
For PNG file
import fs from 'fs';
import {PNG} from 'pngjs';
import pixelmatch from '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));
For JPEG file
import fs from 'fs';
import {decode as decodeJpeg, encode as encodeJpeg} from 'jpeg-js';
import pixelmatch from 'pixelmatch';
const img1 = decodeJpeg(fs.readFileSync('img1.jpg'));
const img2 = decodeJpeg(fs.readFileSync('img2.jpg'));
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.jpg', encodeJpeg(diff).data);
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 with NPM:
npm install pixelmatch
Or use in the browser from a CDN:
<script type="module">
import pixelmatch from 'https://esm.run/pixelmatch';