Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/HumbleSoftware/js-imagediff

JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas.
https://github.com/HumbleSoftware/js-imagediff

Last synced: 2 months ago
JSON representation

JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas.

Host: GitHub
URL: https://github.com/HumbleSoftware/js-imagediff
Owner: HumbleSoftware
License: mit
Created: 2011-10-26T21:08:23.000Z (about 13 years ago)
Default Branch: master
Last Pushed: 2022-12-07T11:55:15.000Z (about 2 years ago)
Last Synced: 2024-10-09T19:35:08.453Z (3 months ago)
Language: JavaScript
Homepage: http://humblesoftware.github.com/js-imagediff/
Size: 610 KB
Stars: 788
Watchers: 24
Forks: 100
Open Issues: 34
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-canvas - js-imagediff - JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas. ![](https://img.shields.io/github/stars/HumbleSoftware/js-imagediff?style=social) ![](https://img.shields.io/github/forks/HumbleSoftware/js-imagediff?style=social) (Libraries / Data processing)

README

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](https://github.com/LearnBoost/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:

```javascript
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](http://humblesoftware.com/flotr2/) - unit testing
* [Envision.js](https://github.com/HumbleSoftware/envisionjs) - unit testing
* [CSS Critic](https://github.com/cburgmer/csscritic) - A CSS regression testing framework
* [HUSL - Human-friendly HSL](http://boronine.com/husl/) - used for regression testing before release.
* [SUCCSS](https://github.com/B2F/Succss) - CSS regression testing.
* [Origami.js](https://github.com/raphamorim/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
---------

2.0.0-alpha

* Update to support Jasmine 3.

1.0.8

* Update canvas dependency.
* Expose internal Canvas.

1.0.7

* Add async image loading for canvas (closes #31, #35, #39).
* Support `--diff`, `--equal`, `--tolerance` (closes #17).

1.0.6

* Add top-aligned diffing option.
* Fix issue with diffing transparencies.

1.0.5

* Move canvas to optional dependencies for browserify support.

1.0.4

* Updated canvas dependency.
* Add check for arguments count in diff mode.

1.0.3

* Added NPM/node.js support.
* Added command line interface for `equal` and `diff` methods.
* Added `imageDataToPNG` method for node environments.
* Added tolerance to handle lossy formats and provide option for acceptable difference.

1.0.2

* Added optional width / height parameters to `createCanvas` for symmetry with `createImageData`.
* Fixed issue with `toImageDiffEqual()` matcher and non Node types - will no convert ImageData and contexts to Canvas elements for display.

1.0.1

* Moved library to imagediff.js
* Added Jasmine matchers
* Minor bug fixes, lint fixes.

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