JavaScript / Canvas based imagediff utility.

• 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.

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.

• 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.

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 HumbleSoftware#22. Please let me know if you have any issues on account of this, or know of a better work around.

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);
  });

• 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

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

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

Carl Sutherland [email protected] http://www.humblesoftware.com