node package manager


Create image differential between two images


Create image differential between two images

This was created as part of a visual regression project.

image-diff depends on ImageMagick.

Please install this before continuing.

Install the module with: npm install image-diff

var imageDiff = require('image-diff');
  actualImage: 'checkerboard.png',
  expectedImage: 'white.png',
  diffImage: 'difference.png',
}, function (errimagesAreSame) {
  // error will be any errors that occurred 
  // imagesAreSame is a boolean whether the images were the same or not 
  // diffImage will have an image which highlights differences 

image-diff exposes a function for you to callback with.

Create an differential image between multiple images

  • options Object
    • options.actualImage String - Path to actual image file
      • options.actualImage must exist
    • options.expectedImage String - Path to expected image file
      • If options.expectedImage does not exist, a transparent image with the same height/width will be created.
    • options.diffImage String - Optional path to output differential image
    • options.shadow Boolean - Optional flag to indicate if we should draw a shadow of the unchanged parts of the images
      • For example, if an image is + and we diff with -, then the image will have | be red but also contain a faded -
      • By default, this options is false meaning a shadow will not be drawn

We offer an image-diff executable to diff from the CLI. When images match, its exit code will be 0. When they don't match, then it will be non-zero (e.g. 1).

$ image-diff --help
  Usage: image-diff [options] <actual-image> <expected-image> [diff-image]
    -h, --help     output usage information
    -V, --version  output the version number
    --shadow       Draw a shadow of unchanges parts on diff image

Example usage:

# Images don't match
image-diff checkerboard.png white.png diff.png
echo $?
# 1
# We can look at `diff.png` for the diff result
# Images do match
image-diff checkerboard.png white.png
echo $?
# 0

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via grunt and test via npm test.

The font used for the example image is Arial 30pt bold and Courier New 38pt.

Copyright (c) 2013 Uber

Licensed under the MIT license.