image-equal
v4.3.1
Published
Test if two images are equal, optionally show image difference
Downloads
7,228
Maintainers
Readme
image-equal
Test if two images are equal. Useful for organising baseline tests for visual components.
Usage
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
- image-pixels — load or save pixel data from any source.
- image-output — output pixels data into any destination.
- pixelmatch − fuzzy image comparison tool.
Credits
© 2018 Dmitry Yv. MIT License