canvas-compare
Compare two images to get their by-pixel diff, similarity percentage and stuff.
Install
npm i canvas-compare
Usage
const promiseCompare = canvasCompare({
baseImageUrl: '/path/to/base/image.jpeg',
targetImageUrl: '/path/to/target/picture.png',
resolution: 0.5, // 0.01..1, optional, defaults to 1
threshold: 10, // 0..255, optional, defaults to 0
isNormalized: true // Boolean, optional, defaults to false
});
promiseCompare.then(function (result) {
// Do things with result
});
promiseCompare.catch(function (reason) {
// Handle the error
});
Parameters
params.baseImageUrl
Non-empty string, required.
params.targetImageUrl
Non-empty string, required.
params.resolution
Float number between 0.01
and 1
, optional, defaults to 1
.
The lower the value, the smaller the resulting diff image. Might be helpful performance-wise when dealing with large images.
params.threshold
Integer between 0
and 255
, optional, defaults to 0
.
If the passed value is lower than threshold
, it drops to 0
. Useful to filter out noise and adjust overall sensitivity.
params.isNormalized
Boolean, optional, defaults to false
.
If the passed value is not zero, it's set to 255
. In short all the values in a normalized image are either 0
, or 255
.
Result
The result
object is returned when the promise is resolved. It consists of a bunch of getters:
result.getImage()
Returns ImageData
with the diff.
result.getPixels()
Returns a number of non-zero-value pixels in the diff.
result.getPercentage()
Returns percentage of non-zero-value pixels in the diff.
result.producePreview()
Returns an <img>
element with the diff representation.
result.getExecutionTime()
Returns execution time in milliseconds.
Demo
Motion detection example (requires a webcam).