Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

image-equal unstable Build Status

Test if two images are equal. Useful for organising baseline tests for visual components.


npm install image-equal

let t = require('tape')
let equal = require('image-equal')
let pixels = require('image-pixels')

t('image test', async t => {
	t.ok(equal(await pixels('./a.png'), canvasA))
	t.ok(equal(await pixels('./b.png'), canvasB, {threshold: .2}))

	// display diff to console in case of mismatch
	t.ok(equal(await pixels('./c.png'), canvasC, true))

	// compare two pixel arrays
	t.ok(equal([0,0,0,255,255,255,255,255], [0,0,0,255,255,255,255,255]))


equal(imageA, imageB, diff?, threshold=0.1|options?)

Takes two images and returns true if they're similar and false otherwise, optionally sending diff stats to diff output. options can adjust comparison logic.

imageA, imageB

Shoud be actual image data container, one of:

  • Canvas, Context2D, WebGLContext
  • ImageData or Object {data: Uint8Array, width, height}
  • DataURL or base64 string
  • Image, Video, ImageBitmap with resolved data
  • Array, Array of Arrays, Uint8Array, FloatArray with raw pixels
  • ArrayBuffer, Buffer
  • Ndarray

To use async image source, like URL, path, ImageBitmap, Promise, incomplete Image/Video, Stream, Blob and alike, use image-pixels:

const equal = require('image-equal')
const load = require('image-pixels')
equal(await load('./a.png'), await load('./b.png')),


Can be one of:

Type Meaning
Bool Show diff data to console, by default false.
console Send diff data to console, same as true.
Canvas2D, Context2D Put diff pixels to a canvas.
document, Element Create a canvas in document/element with diff pixels.
filename String Write diff data to a file or filepath. In browser downloads the file.
ImageData Write diff data to ImageData object.
Array, TypedArray Write diff pixels data to target array.
Stream Send data to stream, eg. process.stdout (acts the same as console).
Function Call function with diff data object.
Object Put diff stats into object: for diff pixels, diff.count for number of diff pixels, diff.ids for diff pixel ids and diff.amount for amount of difference between images, 0..1.


Property Meaning
antialias Include antialias, by default false.
threshold Sensitivity to px difference, 0 - intolerant, 1 - not sensitive. By default 0.1.
clip A sub-area to compare, rectangle [left, top, width, height].

See also


© 2018 Dmitry Yv. MIT License


Test if two images are equal






No releases published


No packages published