added data url support for Kinetic.Image, and added unit tests

dist/kinetic-core.js

@@ -80,15 +80,18 @@ Kinetic.Type = {
     _isFunction: function(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
     },
-    _isArray: function(obj) {
-        return Object.prototype.toString.call(obj) == '[object Array]';
-    },
     _isObject: function(obj) {
         return (!!obj && obj.constructor == Object);
     },
+    _isArray: function(obj) {
+        return Object.prototype.toString.call(obj) == '[object Array]';
+    },
     _isNumber: function(obj) {
         return Object.prototype.toString.call(obj) == '[object Number]';
     },
+    _isString: function(obj) {
+        return Object.prototype.toString.call(obj) == '[object String]';
+    },
     /*
      * other utils
      */
@@ -280,7 +283,14 @@ Kinetic.Type = {
             return arg;
         }
 
-        //if arg is image data, then convert it
+        // if arg is a string, then it's a data url
+        if(this._isString(arg)) {
+            var imageObj = new Image();
+            imageObj.src = arg;
+            return imageObj;
+        }
+
+        //if arg is an object that contains the data property, it's an image object
         if(arg.data) {
             var canvas = document.createElement('canvas');
             canvas.width = arg.width;

src/util/Type.js

@@ -15,15 +15,18 @@ Kinetic.Type = {
     _isFunction: function(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
     },
-    _isArray: function(obj) {
-        return Object.prototype.toString.call(obj) == '[object Array]';
-    },
     _isObject: function(obj) {
         return (!!obj && obj.constructor == Object);
     },
+    _isArray: function(obj) {
+        return Object.prototype.toString.call(obj) == '[object Array]';
+    },
     _isNumber: function(obj) {
         return Object.prototype.toString.call(obj) == '[object Number]';
     },
+    _isString: function(obj) {
+        return Object.prototype.toString.call(obj) == '[object String]';
+    },
     /*
      * other utils
      */
@@ -215,7 +218,14 @@ Kinetic.Type = {
             return arg;
         }
 
-        //if arg is image data, then convert it
+        // if arg is a string, then it's a data url
+        if(this._isString(arg)) {
+            var imageObj = new Image();
+            imageObj.src = arg;
+            return imageObj;
+        }
+
+        //if arg is an object that contains the data property, it's an image object
         if(arg.data) {
             var canvas = document.createElement('canvas');
             canvas.width = arg.width;

tests/js/unitTests.js

@@ -2032,6 +2032,52 @@ Test.prototype.tests = {
 
         layer.add(image);
         layer.draw();
+
+        test(Kinetic.Type._isElement(image.getImage()), 'image property should have been converted to an image element');
+    },
+    'SHAPE - add image with data url': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group();
+
+        var circle = new Kinetic.Ellipse({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        var circle2 = new Kinetic.Ellipse({
+            x: 150,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'yellow',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        group.add(circle);
+        group.add(circle2);
+        layer.add(group);
+        stage.add(layer);
+
+        var image = new Kinetic.Image({
+            image: layer.toDataURL(),
+            x: 200,
+            y: 0,
+            draggable: true
+        });
+
+        layer.add(image);
+        layer.draw();
+
+        test(Kinetic.Type._isElement(image.getImage()), 'image property should have been converted to an image element');
     },
     'SHAPE - set image fill to color then image': function(containerId) {
         var imageObj = new Image();