https://github.com/dy/image-equal
Test if two images are equal
https://github.com/dy/image-equal
Last synced: 3 months ago
JSON representation
Test if two images are equal
- Host: GitHub
- URL: https://github.com/dy/image-equal
- Owner: dy
- Created: 2018-09-24T13:10:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-11T22:28:50.000Z (over 7 years ago)
- Last Synced: 2025-10-19T23:59:28.273Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 50.8 KB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# image-equal [](http://github.com/badges/stability-badges) [](https://travis-ci.org/dy/image-equal)
Test if two images are equal. Useful for organising baseline tests for visual components.
## Usage
[](https://npmjs.org/package/image-equal/)
```js
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](https://ghub.io/image-pixels):
```js
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](https://ghub.io/image-pixels) — load or save pixel data from any source.
* [image-output](https://ghub.io/image-output) — output pixels data into any destination.
* [pixelmatch](https://ghub.io/pixelmatch) − fuzzy image comparison tool.
## Credits
© 2018 Dmitry Yv. MIT License