Skip to content

dy/image-equal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image-equal unstable Build Status

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

Usage

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

	t.end()
})

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')),

diff

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: diff.data 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.

options

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

Credits

© 2018 Dmitry Yv. MIT License

About

Test if two images are equal

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published