fixed new bug with stage toDataURL that was introduced with the new C…

…anvas class, and added new filter unit tests
ericdrowell · Jul 21, 2012 · d74ec8a · d74ec8a
1 parent 4b0b3a2
commit d74ec8a
Show file tree

Hide file tree

Showing 15 changed files with 156 additions and 122 deletions.
diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js
@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Jul 19 2012
+ * Date: Jul 21 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -433,6 +433,19 @@ Kinetic.Canvas.prototype = {
         };
         context.strokeText = function() {
         };
+    },
+    /**
+     * toDataURL
+     */
+    toDataURL: function(mimeType, quality) {
+        try {
+            // If this call fails (due to browser bug, like in Firefox 3.6),
+            // then revert to previous no-parameter image/png behavior
+            return this.element.toDataURL(mimeType, quality);
+        }
+        catch(e) {
+            return this.element.toDataURL();
+        }
     }
 };
 
@@ -1329,7 +1342,6 @@ Kinetic.Node = Kinetic.Class.extend({
         if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
             m.scale(this.attrs.scale.x, this.attrs.scale.y);
         }
-        // center offset
         if(this.attrs.offset.x !== 0 || this.attrs.offset.y !== 0) {
             m.translate(-1 * this.attrs.offset.x, -1 * this.attrs.offset.y);
         }
@@ -1429,15 +1441,7 @@ Kinetic.Node = Kinetic.Class.extend({
         var bufferContext = bufferCanvas.getContext();
         bufferCanvas.clear();
         this._draw(bufferCanvas);
-
-        try {
-            // If this call fails (due to browser bug, like in Firefox 3.6),
-            // then revert to previous no-parameter image/png behavior
-            return bufferCanvas.element.toDataURL(mimeType, quality);
-        }
-        catch(e) {
-            return bufferCanvas.element.toDataURL();
-        }
+        return bufferCanvas.toDataURL(mimeType, quality);
     },
     /**
      * converts node into an image.  Since the toImage
@@ -2345,22 +2349,18 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @param {Number} [quality]
      */
     toDataURL: function(callback, mimeType, quality) {
+        /*
+         * need to create a canvas element rather than using the buffer canvas
+         * because this method is asynchonous which means that other parts of the
+         * code could modify the buffer canvas before it's finished
+         */
         var canvas = new Kinetic.Canvas(this.attrs.width, this.attrs.height);
         var context = canvas.getContext();
         var layers = this.children;
 
         function drawLayer(n) {
             var layer = layers[n];
-            var canvasUrl;
-            try {
-                // If this call fails (due to browser bug, like in Firefox 3.6),
-                // then revert to previous no-parameter image/png behavior
-                canvasUrl = canvas.getElement().toDataURL(mimeType, quality);
-            }
-            catch(e) {
-                canvasUrl = canvas.getElement().toDataURL();
-            }
-
+            var layerUrl = layer.getCanvas().toDataURL(mimeType, quality);
             var imageObj = new Image();
             imageObj.onload = function() {
                 context.drawImage(imageObj, 0, 0);
@@ -2369,17 +2369,10 @@ Kinetic.Stage = Kinetic.Container.extend({
                     drawLayer(n + 1);
                 }
                 else {
-                    try {
-                        // If this call fails (due to browser bug, like in Firefox 3.6),
-                        // then revert to previous no-parameter image/png behavior
-                        callback(canvas.getElement().toDataURL(mimeType, quality));
-                    }
-                    catch(e) {
-                        callback(canvas.getElement().toDataURL());
-                    }
+                    callback(canvas.toDataURL(mimeType, quality));
                 }
             };
-            imageObj.src = canvasUrl;
+            imageObj.src = layerUrl;
         }
         drawLayer(0);
     },
@@ -3168,14 +3161,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * @param {Number} [quality]
      */
     toDataURL: function(mimeType, quality) {
-        try {
-            // If this call fails (due to browser bug, like in Firefox 3.6),
-            // then revert to previous no-parameter image/png behavior
-            return this.getCanvas().element.toDataURL(mimeType, quality);
-        }
-        catch(e) {
-            return this.getCanvas().element.toDataURL();
-        }
+        return this.getCanvas().toDataURL(mimeType, quality);
     },
     /**
      * private draw children
@@ -3607,11 +3593,10 @@ Kinetic.Shape = Kinetic.Node.extend({
             for(var n = 0; n < family.length; n++) {
                 var node = family[n];
                 var t = node.getTransform();
-
                 var m = t.getMatrix();
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
-
+            
             /*
              * pre styles include alpha, linejoin
              */
@@ -5353,21 +5338,20 @@ Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
 //  Transform
 ///////////////////////////////////////////////////////////////////////
 /*
-* Last updated November 2011
-* By Simon Sarris
-* www.simonsarris.com
-* sarris@acm.org
-*
-* Free to use and distribute at will
-* So long as you are nice to people, etc
-*/
+ * Last updated November 2011
+ * By Simon Sarris
+ * www.simonsarris.com
+ * sarris@acm.org
+ *
+ * Free to use and distribute at will
+ * So long as you are nice to people, etc
+ */
 
 /*
-* The usage of this class was inspired by some of the work done by a forked
-* project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
-* class.
-*/
-
+ * The usage of this class was inspired by some of the work done by a forked
+ * project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
+ * class.
+ */
 
 Kinetic.Transform = function() {
     this.m = [1, 0, 0, 1, 0, 0];

diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js
diff --git a/src/Layer.js b/src/Layer.js
@@ -106,14 +106,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * @param {Number} [quality]
      */
     toDataURL: function(mimeType, quality) {
-        try {
-            // If this call fails (due to browser bug, like in Firefox 3.6),
-            // then revert to previous no-parameter image/png behavior
-            return this.getCanvas().element.toDataURL(mimeType, quality);
-        }
-        catch(e) {
-            return this.getCanvas().element.toDataURL();
-        }
+        return this.getCanvas().toDataURL(mimeType, quality);
     },
     /**
      * private draw children

diff --git a/src/Node.js b/src/Node.js
@@ -735,7 +735,6 @@ Kinetic.Node = Kinetic.Class.extend({
         if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
             m.scale(this.attrs.scale.x, this.attrs.scale.y);
         }
-        // center offset
         if(this.attrs.offset.x !== 0 || this.attrs.offset.y !== 0) {
             m.translate(-1 * this.attrs.offset.x, -1 * this.attrs.offset.y);
         }
@@ -835,15 +834,7 @@ Kinetic.Node = Kinetic.Class.extend({
         var bufferContext = bufferCanvas.getContext();
         bufferCanvas.clear();
         this._draw(bufferCanvas);
-
-        try {
-            // If this call fails (due to browser bug, like in Firefox 3.6),
-            // then revert to previous no-parameter image/png behavior
-            return bufferCanvas.element.toDataURL(mimeType, quality);
-        }
-        catch(e) {
-            return bufferCanvas.element.toDataURL();
-        }
+        return bufferCanvas.toDataURL(mimeType, quality);
     },
     /**
      * converts node into an image.  Since the toImage

diff --git a/src/Shape.js b/src/Shape.js
@@ -330,11 +330,10 @@ Kinetic.Shape = Kinetic.Node.extend({
             for(var n = 0; n < family.length; n++) {
                 var node = family[n];
                 var t = node.getTransform();
-
                 var m = t.getMatrix();
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
-
+            
             /*
              * pre styles include alpha, linejoin
              */

diff --git a/src/Stage.js b/src/Stage.js
@@ -288,22 +288,18 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @param {Number} [quality]
      */
     toDataURL: function(callback, mimeType, quality) {
+        /*
+         * need to create a canvas element rather than using the buffer canvas
+         * because this method is asynchonous which means that other parts of the
+         * code could modify the buffer canvas before it's finished
+         */
         var canvas = new Kinetic.Canvas(this.attrs.width, this.attrs.height);
         var context = canvas.getContext();
         var layers = this.children;
 
         function drawLayer(n) {
             var layer = layers[n];
-            var canvasUrl;
-            try {
-                // If this call fails (due to browser bug, like in Firefox 3.6),
-                // then revert to previous no-parameter image/png behavior
-                canvasUrl = canvas.getElement().toDataURL(mimeType, quality);
-            }
-            catch(e) {
-                canvasUrl = canvas.getElement().toDataURL();
-            }
-
+            var layerUrl = layer.getCanvas().toDataURL(mimeType, quality);
             var imageObj = new Image();
             imageObj.onload = function() {
                 context.drawImage(imageObj, 0, 0);
@@ -312,17 +308,10 @@ Kinetic.Stage = Kinetic.Container.extend({
                     drawLayer(n + 1);
                 }
                 else {
-                    try {
-                        // If this call fails (due to browser bug, like in Firefox 3.6),
-                        // then revert to previous no-parameter image/png behavior
-                        callback(canvas.getElement().toDataURL(mimeType, quality));
-                    }
-                    catch(e) {
-                        callback(canvas.getElement().toDataURL());
-                    }
+                    callback(canvas.toDataURL(mimeType, quality));
                 }
             };
-            imageObj.src = canvasUrl;
+            imageObj.src = layerUrl;
         }
         drawLayer(0);
     },

diff --git a/src/util/Canvas.js b/src/util/Canvas.js
@@ -108,5 +108,18 @@ Kinetic.Canvas.prototype = {
         };
         context.strokeText = function() {
         };
+    },
+    /**
+     * toDataURL
+     */
+    toDataURL: function(mimeType, quality) {
+        try {
+            // If this call fails (due to browser bug, like in Firefox 3.6),
+            // then revert to previous no-parameter image/png behavior
+            return this.element.toDataURL(mimeType, quality);
+        }
+        catch(e) {
+            return this.element.toDataURL();
+        }
     }
 };
diff --git a/src/util/Transform.js b/src/util/Transform.js
@@ -2,21 +2,20 @@
 //  Transform
 ///////////////////////////////////////////////////////////////////////
 /*
-* Last updated November 2011
-* By Simon Sarris
-* www.simonsarris.com
-* sarris@acm.org
-*
-* Free to use and distribute at will
-* So long as you are nice to people, etc
-*/
+ * Last updated November 2011
+ * By Simon Sarris
+ * www.simonsarris.com
+ * sarris@acm.org
+ *
+ * Free to use and distribute at will
+ * So long as you are nice to people, etc
+ */
 
 /*
-* The usage of this class was inspired by some of the work done by a forked
-* project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
-* class.
-*/
-
+ * The usage of this class was inspired by some of the work done by a forked
+ * project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
+ * class.
+ */
 
 Kinetic.Transform = function() {
     this.m = [1, 0, 0, 1, 0, 0];

diff --git a/tests/darth-vader.jpg → tests/assets/darth-vader.jpg b/tests/darth-vader.jpg → tests/assets/darth-vader.jpg
diff --git a/tests/lion.png → tests/assets/lion.png b/tests/lion.png → tests/assets/lion.png
diff --git a/tests/scorpion-sprite.png → tests/assets/scorpion-sprite.png b/tests/scorpion-sprite.png → tests/assets/scorpion-sprite.png
diff --git a/tests/assets/unitDataUrls.js b/tests/assets/unitDataUrls.js
diff --git a/tests/js/Test.js b/tests/js/Test.js
@@ -21,7 +21,7 @@ function test(condition, message, warn) {
         if(warn) {
             testCounter.style.backgroundColor = 'orange';
             testCounter.style.color = 'black';
-            console.warn(message + ' (NOTE: use Google Chrome for data url comparisons)');
+            console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
         }
         else {
             testCounter.style.backgroundColor = 'red';

diff --git a/tests/js/manualTests.js b/tests/js/manualTests.js
@@ -325,7 +325,7 @@ Test.prototype.tests = {
             layer.add(darth);
             stage.add(layer);
         };
-        imageObj.src = '../darth-vader.jpg';
+        imageObj.src = '../assets/darth-vader.jpg';
     },
     'EVENTS - star pixel detection': function(containerId) {
         var stage = new Kinetic.Stage({