Awesome

js-imagediff

JavaScript / Canvas based imagediff utility.

API

• createCanvas() create a new Canvas element.
• createImageData(width, height) create a new ImageData object.
• isImage(object) tests for Image object.
• isCanvas(object) tests for Canvas object.
• isContext(object) tests for CanvasRenderingContext2D object.
• isImageData(object) tests for ImageData object.
• isImageType(object) tests for any of the above.
• toImageData(object) converts image type object to a new ImageData object.
• equal(a, b, tolerance) tests image type objects for equality; accepts tolerance in pixels.
• diff(a, b, options) performs an image diff on a and b, returning a - b.
  • options.align set to 'top' to top-align the images when diffing different sizes.
• noConflict() removes imagediff from the global space for compatibility, returning imagediff.
• imageDataToPNG(imageData, outputFile, [callback]) (node only) renders the imageData to png in outputFile with optional callback.

NodeJS

js-imagediff is available through the npm. It uses node-canvas which requires lib cairo to be installed. Install js-imagediff with npm install -g imagediff.

Command Line

• imagediff [-e|equal] [-t|tolerance VALUE] FILE_A FILE_B tests equality of two image files with an optional tolerance, printing 'true' or 'false'.
• imagediff [-d|diff] FILE_A FILE_B OUTPUT_FILE renders an imagediff between two files, saving as the output file.

Cannot find module 'canvas'

Canvas has been moved to an optional dependency for better browser and browserify support. If you see a message that the module cannot be found, please check npm install first, incase there was indeed an issue installing it. This relates to https://github.com/HumbleSoftware/js-imagediff/issues/22. Please let me know if you have any issues on account of this, or know of a better work around.

Unit Testing Canvas

JS ImageDiff opens up the easy testing of Canvas and other image-like objects in JavaScript. js-imagediff supplies two Jasmine matchers to make this easier.

• toImageDiffEqual(expected, tolerance) expect a result to equal another image type.
• toBeImageData() expect a result to be ImageData.

On failed tests, toImageDiffEqual() will display the expected image, the actual image and the imagediff of the two letting you easily spot mistakes.

To use matchers:

  beforeEach(function () {
    this.addMatchers(imagediff.jasmine);
  });

Demo

• A demo is available at http://humblesoftware.github.com/js-imagediff/
• A Jasmine test demo is available at http://humblesoftware.github.com/js-imagediff/test.html

Users

• Flotr2 - unit testing
• Envision.js - unit testing
• CSS Critic - A CSS regression testing framework
• HUSL - Human-friendly HSL - used for regression testing before release.
• SUCCSS - CSS regression testing.
• Origami.js - A canvas library

If you are using js-imagediff pelase drop us a line and let us know what you are doing with it.

Changelog

Author

Carl Sutherland carl@humblesoftware.com http://www.humblesoftware.com