new method. close #20

CHANGELOG.md

@@ -17,7 +17,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
   So you can use `context.fillStyle` property in your `sceneFunc` without accessing native context.
 - `toDataURL` now handle pixelRatio. So image for stage 400x400 for retina will be 800x800.
 - Correct `clone()` for custom nodes
-  
+
+### Added
+- new `Konva.Image.fromURL` method
 
 ## [0.9.0][2015-02-27]
 
@@ -38,7 +40,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
 - new `getClientRect` method.
 - new `to` method for every nodes for shorter tweening
-    
+
 ## [0.8.0] - 2015-02-04
 
 * Bug Fixes
@@ -64,7 +66,7 @@ Differents from last official `KineticJS` release
     * Correct mouseover/mouseout/mouseenter/mouseleave events for groups
     * cache node before adding to layer
     * `intersects` function now works for shapes with shadow
-    
+
 * Enhancements
     * `cornerRadius` of Rect is limited by `width/2` and `height/2`
     * `black` is default fill for text
@@ -84,4 +86,3 @@ Differents from last official `KineticJS` release
     * new Arrow plugin
     * multiple names: `node.name('foo bar'); container.find('.foo');` (thanks [@mattslocum](https://github.com/mattslocum))
     * `Container.findOne()`
-    

src/shapes/Image.js

@@ -197,4 +197,28 @@
      */
 
     Konva.Collection.mapMethods(Konva.Image);
+
+    /**
+     * load image from given url and create `Konva.Image` instance
+     * @method
+     * @memberof Konva.Image
+     * @param {String} url image source
+     * @param {Function} callback with Konva.Image instance as first argument
+     * @example
+     *  Konva.Image.fromURL(imageURL, function(image){
+     *    // image is Konva.Image instance
+     *    layer.add(image);
+     *    layer.draw();
+     *  });
+     */
+    Konva.Image.fromURL = function(url, callback) {
+        var img = new Image();
+        img.onload = function() {
+          var image = new Konva.Image({
+            image: img
+          });
+          callback(image);
+        };
+        img.src = url;
+    };
 })();

test/unit/shapes/Image-test.js

@@ -96,7 +96,7 @@ suite('Image', function(){
           });
 
           //document.body.appendChild(layer.bufferCanvas.element)
-          
+
           assert.equal(darth.getClassName(), 'Image');
 
           var trace = layer.getContext().getTrace();
@@ -142,7 +142,7 @@ suite('Image', function(){
           assert.equal(darth.getCropHeight(), 74);
 
           darth.setCrop({x: 1, y: 2, width: 3, height: 4});
-          
+
           assert.equal(darth.getCrop().x, 1);
           assert.equal(darth.getCrop().y, 2);
           assert.equal(darth.getCrop().width, 3);
@@ -166,9 +166,9 @@ suite('Image', function(){
           assert.equal(darth.getCropX(), 5);
           assert.equal(darth.getCropY(), 6);
           assert.equal(darth.getCropWidth(), 7);
-          assert.equal(darth.getCropHeight(), 8);  
+          assert.equal(darth.getCropHeight(), 8);
 
-          done();    
+          done();
 
       };
       imageObj.src = 'assets/darth-vader.jpg';
@@ -194,7 +194,7 @@ suite('Image', function(){
           layer.add(tiger);
           stage.add(layer);
 
-          done();  
+          done();
       };
       imageObj.src = 'assets/Ghostscript_Tiger.svg';
   });
@@ -211,7 +211,7 @@ suite('Image', function(){
           stroke: 'black',
           strokeWidth: 5
       }));
-      
+
       imageObj.onload = function() {
 
           var tiger = new Konva.Image({
@@ -224,21 +224,21 @@ suite('Image', function(){
           });
 
           layer.add(tiger);
-          
+
           layer.add(new Konva.Line({
               points: [578,0,0,200],
               stroke: 'blue',
               strokeWidth: 5
           }));
-      
+
           stage.add(layer);
 
-          done();  
+          done();
 
       };
       imageObj.style.opacity = 0.5;
       imageObj.src = 'assets/Ghostscript_Tiger.svg';
-              
+
   });
 
   // ======================================================
@@ -345,5 +345,22 @@ suite('Image', function(){
         imageObj.src = 'assets/darth-vader.jpg';
     });
 
+    test('image loader', function(done) {
+      var stage = addStage();
+      var layer = new Konva.Layer();
+      stage.add(layer);
+      var src = 'assets/darth-vader.jpg';
+      Konva.Image.fromURL(src, function(image) {
+          layer.add(image);
+          layer.draw();
+          assert.equal(image instanceof Konva.Image, true);
+          var nativeImg = image.image();
+          assert.equal(nativeImg instanceof Image, true);
+          assert.equal(nativeImg.src.indexOf(src) !== -1, true);
+          assert.equal(nativeImg.complete, true);
+          done();
+      });
+    });
 
-});
+
+});