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.

1 files changed, 36 insertions, 0 deletions

diff --git a/public/js/mp/resource.js b/public/js/mp/resource.js
new file mode 100644
index 0000000..f348a89
--- /dev/null
+++ b/public/js/mp/resource.js
@@ -0,0 +1,36 @@
+"use strict";
+var mp = function(mp) {
+    mp.resource = {
+        loadImage: loadImage
+    };
+
+    /*
+     * Quick compatability workaround
+     *  node testing environment needs new Canvas() and won't tolerate document.createElement("canvas")
+     *  A createCanvas method is therefore provided in its sandbox which can be quickly checked to determine the method needed
+     */
+    var createCanvas = "createCanvas" in document ? document.createCanvas : function() { return document.createElement("canvas"); };
+
+    var canvas = createCanvas();
+    var context = canvas.getContext("2d");
+
+    /*
+     * Load in an image given a URL.
+     * The provided callback will fire when loading is complete.
+     * The parameters will be false and the the imageData if successful, and false and the error otherwise.
+     */
+    function loadImage(url, callback) {
+        var image = new Image();
+        image.onload = function() {
+            canvas.width = image.width;
+            canvas.height = image.height;
+            context.drawImage(image, 0, 0);
+            callback(false, context.getImageData(0, 0, image.width, image.height));
+        };
+        image.onerror = function(err) {
+            callback(true, err);
+        };
+        image.src = url;
+    }
+    return mp;
+}(mp || {});