Permalink
Browse files

Merge pull request #6 from jsantell/node-js

Node js
  • Loading branch information...
2 parents f3f2593 + 124a4a1 commit 79dcd18a1b23500583b68579c6831774a50ceae6 @cesutherland cesutherland committed Feb 17, 2012
View
@@ -1 +1,2 @@
.jhw-cache
+node_modules
View
@@ -1,4 +1,10 @@
-default: test
+default: test test-node imagediff
+
+imagediff:
smoosh make/build.json
+
test:
cd spec; jasmine-headless-webkit js -j jasmine.yml -c
+
+test-node:
+ cd spec; jasmine-node .
View
@@ -17,6 +17,12 @@ API
* `equal(a, b)` tests image type objects for equality.
* `diff(a, b)` performs an image diff on a and b, returning a - b.
* `noConflict()` removes imagediff from the global space for compatibility, returning imagediff.
+* `imageDataToPNG(imageData, outputFile)` renders the imageData to png in outputFile. (Node only)
+
+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.
Unit Testing Canvas
-------------------
@@ -57,4 +63,4 @@ Changelog
Author
------
Carl Sutherland carl@humblesoftware.com
-http://www.humblesoftware.com
+http://www.humblesoftware.com
View
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+var imagediff = require('imagediff'),
+ Canvas = require('canvas');
+
+commandLine(process.argv.slice(2));
+
+function commandLine (args) {
+
+ if (args.length < 3) {
+ console.log("Invalid parameters:");
+ console.log("imagediff [-e|equal] [-t|tolerance VALUE] FILE_A FILE_B");
+ console.log("imagediff [-d|diff] FILE_A FILE_B OUTPUT_FILE");
+ return;
+ }
+
+ var
+ a = new Canvas.Image(),
+ b = new Canvas.Image(),
+ t = 0,
+ aName, bName, i, fn, result, output;
+
+ for (i = args.length - 2; i--;) {
+ switch (args[i]) {
+ case '-d':
+ case 'diff':
+ fn = 'diff';
+ break;
+ case '-e':
+ case 'equal':
+ fn = 'equal'
+ break;
+ case '-t':
+ case 'tolerance':
+ t = args[i + 1];
+ break;
+ }
+ }
+
+ if (fn === 'diff') {
+ output = args.pop();
+ }
+ b.src = bName = args.pop();
+ a.src = aName = args.pop();
+ a = imagediff.toImageData(a);
+ b = imagediff.toImageData(b);
+
+ result = imagediff[fn](a, b, t);
+
+ if (fn === 'equal') {
+ process.stdout.write(result ? 'true' : 'false');
+ } else if (fn === 'diff') {
+ imagediff.imageDataToPNG(result, output);
+ process.stdout.write('Diff of ' + aName + ' and ' + bName + ' rendered to ' + output);
+ }
+};
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>JS-ImageDiff Example</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="description" content="JavaScript imagediff utility using canvas for doing image diff in the browser." />
+ <script type="text/javascript" src="../imagediff.js"></script>
+ <link rel="stylesheet" href="styles.css" type="text/css" />
+</head>
+<body>
+ <div id="content">
+ <h1>JS-ImageDiff Example:</h1>
+ <p>See more examples at <a href="http://humblesoftware.github.com/js-imagediff/">humblesoftware.github.com/js-imagediff</a>.
+ Sample images from the <a href="https://github.com/cameronmcefee/Image-Diff-View-Modes/commit/8e95f70c9c47168305970e91021072673d7cdad8">github imagediff demo</a>.</p>
+ <div id="demo">
+ <img id="1-a" alt="example image one" src="1_normal_a.jpg" />
+ <img id="1-b" alt="example image two" src="1_normal_b.jpg" />
+ </div>
+ <script type="text/javascript">
+
+ //
+ // Example:
+ //
+
+ var
+ a = document.getElementById('1-a'), // Original image
+ b = document.getElementById('1-b'), // Altered image
+ demo = document.getElementById('demo'); // Container div
+
+ function difference () {
+
+ var
+ diff, canvas, context;
+
+ if (!a.complete || !b.complete) {
+
+ // Images are loaded asynchronously.
+ // Let's wait until they are ready.
+ setTimeout(difference, 10);
+
+ } else {
+
+ // Once they are ready, create a diff.
+ // This returns an ImageData object.
+ diff = imagediff.diff(a, b);
+
+ // Now create a canvas,
+ canvas = imagediff.createCanvas(diff.width, diff.height);
+
+ // get its context
+ context = canvas.getContext('2d');
+
+ // and finally draw the ImageData diff.
+ context.putImageData(diff, 0, 0);
+
+ // Add the canvas element to the container.
+ demo.appendChild(canvas);
+ }
+ }
+
+ difference();
+ </script>
+ </div>
+ <div id="github-ribbon">
+ <a href="http://github.com/HumbleSoftware/js-imagediff"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"/></a>
+ </div>
+</body>
+</html>
+
View
@@ -0,0 +1,29 @@
+/* Demo */
+body {
+ font-family: "Droid Sans",sans-serif;
+}
+body,
+a,
+a:visited {
+ color: #333;
+}
+h1 {
+ text-align: center;
+ margin: 40px 0px;
+ font-size: 36px;
+ text-shadow: 2px 2px 0 #CCC;
+}
+p {
+ text-align: center;
+}
+ul {
+ list-style: none;
+}
+div#content {
+ margin: 0px auto;
+ width: 930px;
+}
+div.footer {
+ margin-top: 50px;
+ text-align: right;
+}
View
113 imagediff.js 100644 → 100755
@@ -7,22 +7,23 @@
*/
(function (name, definition) {
var root = this;
- if (typeof module != 'undefined') {
- module.exports = definition();
- } else if (typeof define == 'function' && typeof define.amd == 'object') {
+ if (typeof module !== 'undefined') {
+ var Canvas = require('canvas');
+ module.exports = definition(root, name, Canvas);
+ } else if (typeof define === 'function' && typeof define.amd === 'object') {
define(definition);
} else {
root[name] = definition(root, name);
}
-})('imagediff', function (root, name) {
+})('imagediff', function (root, name, Canvas) {
var
- TYPE_ARRAY = '[object Array]',
- TYPE_CANVAS = '[object HTMLCanvasElement]',
- TYPE_CONTEXT = '[object CanvasRenderingContext2D]',
- TYPE_IMAGE = '[object HTMLImageElement]',
+ TYPE_ARRAY = /\[object Array\]/i,
+ TYPE_CANVAS = /\[object (Canvas|HTMLCanvasElement)\]/i,
+ TYPE_CONTEXT = /\[object CanvasRenderingContext2D\]/i,
+ TYPE_IMAGE = /\[object (Image|HTMLImageElement)\]/i,
+ TYPE_IMAGE_DATA = /\[object ImageData\]/i,
- OBJECT = 'object',
UNDEFINED = 'undefined',
canvas = getCanvas(),
@@ -33,7 +34,9 @@
// Creation
function getCanvas (width, height) {
var
- canvas = document.createElement('canvas');
+ canvas = Canvas ?
+ new Canvas() :
+ document.createElement('canvas');
if (width) canvas.width = width;
if (height) canvas.height = height;
return canvas;
@@ -57,11 +60,11 @@
return isType(object, TYPE_CONTEXT);
}
function isImageData (object) {
- return (object
- && typeof(object) === OBJECT
+ return !!(object
+ && isType(object, TYPE_IMAGE_DATA)
&& typeof(object.width) !== UNDEFINED
&& typeof(object.height) !== UNDEFINED
- && typeof(object.data) !== UNDEFINED ? true : false);
+ && typeof(object.data) !== UNDEFINED);
}
function isImageType (object) {
return (
@@ -72,7 +75,7 @@
);
}
function isType (object, type) {
- return typeof (object) === 'object' && Object.prototype.toString.apply(object) === type;
+ return typeof (object) === 'object' && !!Object.prototype.toString.apply(object).match(type);
}
@@ -264,6 +267,7 @@
}
return element;
}
+
jasmine = {
toBeImageData : function () {
@@ -272,40 +276,59 @@
toImageDiffEqual : function (expected, tolerance) {
- this.message = function() {
-
- var
- div = get('div'),
- a = get('div', '<div>Actual:</div>'),
- b = get('div', '<div>Expected:</div>'),
- c = get('div', '<div>Diff:</div>'),
- diff = imagediff.diff(this.actual, expected),
- canvas = getCanvas(),
- context;
-
- canvas.height = diff.height;
- canvas.width = diff.width;
+ if (typeof (document) !== UNDEFINED) {
+ this.message = function () {
+ var
+ div = get('div'),
+ a = get('div', '<div>Actual:</div>'),
+ b = get('div', '<div>Expected:</div>'),
+ c = get('div', '<div>Diff:</div>'),
+ diff = imagediff.diff(this.actual, expected),
+ canvas = getCanvas(),
+ context;
+
+ canvas.height = diff.height;
+ canvas.width = diff.width;
+
+ context = canvas.getContext('2d');
+ context.putImageData(diff, 0, 0);
+
+ a.appendChild(toCanvas(this.actual));
+ b.appendChild(toCanvas(expected));
+ c.appendChild(canvas);
+
+ div.appendChild(a);
+ div.appendChild(b);
+ div.appendChild(c);
+
+ return [
+ div,
+ "Expected not to be equal."
+ ];
+ };
+ }
- context = canvas.getContext('2d');
- context.putImageData(diff, 0, 0);
+ return imagediff.equal(this.actual, expected, tolerance);
+ }
+ };
- a.appendChild(toCanvas(this.actual));
- b.appendChild(toCanvas(expected));
- c.appendChild(canvas);
- div.appendChild(a);
- div.appendChild(b);
- div.appendChild(c);
+ // Image Output
+ function imageDataToPNG (imageData, outputFile) {
- return [
- div,
- "Expected not to be equal."
- ];
- };
+ var
+ canvas = toCanvas(imageData),
+ base64Data,
+ decodedImage;
+
+ base64Data = canvas.toDataURL().replace(/^data:image\/\w+;base64,/,"");
+ decodedImage = new Buffer(base64Data, 'base64');
+ require('fs').writeFile(outputFile, decodedImage, function(E) {
+ //TODO throws 'png' regardless of success?
+ if (E) throw E;
+ });
+ }
- return imagediff.equal(this.actual, expected, tolerance);
- }
- };
// Definition
imagediff = {
@@ -347,5 +370,9 @@
}
};
+ if (typeof module !== 'undefined') {
+ imagediff.imageDataToPNG = imageDataToPNG;
+ }
+
return imagediff;
});
View
2 imagediff.min.js 100644 → 100755

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 79dcd18

Please sign in to comment.