Implement dyeImage

Split loadImage into a common resource.js

Add a compatability check for both canvas-node and browser functionality

Note that the generated dyed image is off-by-one to the tested TMWW image.
The algorithm needs verification and possibly correction.

Either way, it's close enough by the eye.

3 files changed, 46 insertions, 29 deletions

diff --git a/test/load.js b/test/load.js
index 97bee69..57e838e 100644
--- a/test/load.js
+++ b/test/load.js
@@ -2,7 +2,8 @@
 process.env.TZ = "UTC";
 
 var smash = require("smash"),
-    jsdom = require("jsdom");
+    jsdom = require("jsdom"),
+    Canvas = require("canvas");
 
 module.exports = function() {
     var files = [].slice.call(arguments).map(function(d) { return "public/js/" + d; }),
@@ -40,10 +41,16 @@ module.exports = function() {
             };
         };
 
+        document.createCanvas = function() {
+            return new Canvas();
+        }
+
         sandbox = {
             console: console,
             document: document,
             window: document.createWindow(),
+            Canvas: Canvas,
+            Image: Canvas.Image
         };
 
         return topic;
diff --git a/test/mp/dye.js b/test/mp/dye.js
index 36acfa3..26b33c2 100644
--- a/test/mp/dye.js
+++ b/test/mp/dye.js
@@ -7,7 +7,7 @@ var suite = vows.describe("mp.dye");
 
 suite.addBatch({
     "The manaportal dye": {
-        topic: load("mp/dye").expression("mp.dye"),
+        topic: load("mp/dye").expression("mp.dye").document(),
         "getChannel": {
             topic: function(dye) { return dye.getChannel; },
             "returns null given pure black": function(f) {
diff --git a/test/mp/future.js b/test/mp/future.js
index 6f491ae..cf0e68a 100644
--- a/test/mp/future.js
+++ b/test/mp/future.js
@@ -2,15 +2,10 @@
 var vows = require("vows"),
     load = require("../load"),
     assert = require("assert"),
-    jsdom = require("jsdom"),
-    Canvas = require("canvas"),
-    Image = Canvas.Image;
+    jsdom = require("jsdom");
 
 var suite = vows.describe("mp.dye");
 
-var canvas = new Canvas(32,32);
-var context = canvas.getContext("2d");
-
 var dyeString = "R:#ede5b2,fff7bf;G:#cccccc,ffffff";
 var dyeData = {
     "R": [
@@ -23,40 +18,55 @@ var dyeData = {
     ]
 };
 
-function loadImage(url, tests) {
+function assertImageDataEqual(input, expected, actual, width) {
+    assert.equal(actual.length, expected.length, "expected same " + expected.length + " pixel components, found " + actual.length);
+    for (var i = 0; i != actual.length; i += 4) {
+        var p = i / 4;
+        var y = Math.floor(p / width);
+        var x = p - y * width;
+        var msg = "At (" + x + "," + y + "): "
+                + "Input rgba(" + input   [i    ] + "," + input   [i + 1] + "," + input   [i + 2] + "," + input   [i + 3] + ") "
+        + "should dye to rgba(" + expected[i    ] + "," + expected[i + 1] + "," + expected[i + 2] + "," + expected[i + 3] + "); "
+                + "found rgba(" + actual  [i    ] + "," + actual  [i + 1] + "," + actual  [i + 2] + "," + actual  [i + 3] + ")";
+        assert.equal(actual[i    ], expected[i    ], msg);
+        assert.equal(actual[i + 1], expected[i + 1], msg);
+        assert.equal(actual[i + 2], expected[i + 2], msg);
+        assert.equal(actual[i + 3], expected[i + 3], msg);
+    }
+}
+
+function unshiftLoadImageBind(url, tests) {
     tests.topic = function() {
-        var image = new Image;
+        var mp = arguments[arguments.length - 1];
         var tester = this;
-        var callback = this.callback;
         var args = arguments;
-        image.onload = function() {
-            canvas.width = image.width;
-            canvas.height = image.height;
-            context.drawImage(image, 0, 0);
-            callback = callback.bind(tester, false, context.getImageData(0, 0, image.width, image.height));
-            callback.apply(tester, args);
-        }
-        image.onerror = function(err) {
-            throw new Error("Error loading '" + url + "': " + err);
-        }
-        image.src = url;
+        mp.resource.loadImage(url, function(err, data) {
+            if (err) {
+                throw new Error("Error loading '" + url + "': " + data);
+            }
+            tester.callback.bind(tester, err, data).apply(tester, args);
+        });
     };
     return tests;
 }
 
 suite.addBatch({
     "The manaportal dye": {
-        topic: load("mp/dye").expression("mp.dye").document(),
+        topic: load("mp/dye", "mp/resource").expression("mp").document(),
         "parseDyeString": {
-            "Extracts a the dye channel data from the dyestring": function(dye) {
-                assert.equal(dye.parseDyeString(dyeString), dyeData);
+            "Extracts the dye channel data from the dyestring": function(mp) {
+                assert.equal(mp.dye.parseDyeString(dyeString), dyeData);
             }
         },
         "dyeImage": {
-            "with the big recolorable cake": loadImage("test/data/bigcake.png", {
-                "to the big white cake": loadImage("test/data/whitecake.png", {
-                    "dyes correctly when given the correct dye data": function(err1, whiteCake, dyeableCake, dye) {
-                        assert.deepEqual(dye.dyeImage(dyeableCake.data, dyeData), whiteCake.data);
+            "with the big recolorable cake": unshiftLoadImageBind("test/data/bigcake.png", {
+                "to the big white cake": unshiftLoadImageBind("test/data/whitecake.png", {
+                    "dyes correctly when given the correct dye data": function(err, whiteCake, dyeableCake, mp) {
+                        var input = dyeableCake.data;
+                        var expected = whiteCake.data;
+                        var actual = new Uint8ClampedArray(input);
+                        mp.dye.dyeImage(actual, dyeData);
+                        assertImageDataEqual(input, expected, actual, whiteCake.width);
                     }
                 })
             })