some toDataURL fixes and refactoring

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.2.1
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Mon Aug 13 2018
+ * Date: Thu Aug 16 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2561,12 +2561,9 @@
         drawBorder = conf.drawBorder || false;
 
       if (!width || !height) {
-        // make throw async, because we don't need to stop funcion
+        Konva.Util.error(
-        setTimeout(function() {
+          'Can not cache the node. Width or height of the node equals 0. Caching is skipped.'
-          Konva.Util.throw(
+        );
-            'Width or height of caching configuration equals 0. Caching is ignored.'
-          );
-        });
         return;
       }
 
@@ -3966,8 +3963,8 @@
       var box = this.getClientRect();
 
       var stage = this.getStage(),
-        x = config.x || box.x,
+        x = config.x !== undefined ? config.x : box.x,
-        y = config.y || box.y,
+        y = config.y !== undefined ? config.y : box.y,
         pixelRatio = config.pixelRatio || 1,
         canvas = new Konva.SceneCanvas({
           width: config.width || box.width || (stage ? stage.getWidth() : 0),
@@ -4028,7 +4025,11 @@
       config = config || {};
       var mimeType = config.mimeType || null,
         quality = config.quality || null;
-      return this._toKonvaCanvas(config).toDataURL(mimeType, quality);
+      var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
+      if (config.callback) {
+        config.callback(url);
+      }
+      return url;
     },
     /**
      * converts node into an image.  Since the toImage
@@ -4059,8 +4060,10 @@
       if (!config || !config.callback) {
         throw 'callback required for toImage method config argument';
       }
+      var callback = config.callback;
+      delete config.callback;
       Konva.Util._getImage(this.toDataURL(config), function(img) {
-        config.callback(img);
+        callback(img);
       });
     },
     setSize: function(size) {
@@ -10354,12 +10357,10 @@
     getContent: function() {
       return this.content;
     },
-    toDataURL: function(config) {
+    _toKonvaCanvas: function(config) {
       config = config || {};
 
-      var mimeType = config.mimeType || null,
+      var x = config.x || 0,
-        quality = config.quality || null,
-        x = config.x || 0,
         y = config.y || 0,
         canvas = new Konva.SceneCanvas({
           width: config.width || this.getWidth(),
@@ -10377,24 +10378,16 @@
         if (!layer.isVisible()) {
           return;
         }
-        var width = layer.getCanvas().getWidth();
+        var layerCanvas = layer._toKonvaCanvas(config);
-        var height = layer.getCanvas().getHeight();
-        var ratio = layer.getCanvas().getPixelRatio();
         _context.drawImage(
-          layer.getCanvas()._canvas,
+          layerCanvas._canvas,
-          0,
+          x,
-          0,
+          y,
-          width / ratio,
+          layerCanvas.getWidth() / layerCanvas.getPixelRatio(),
-          height / ratio
+          layerCanvas.getHeight() / layerCanvas.getPixelRatio()
         );
       });
-      var src = canvas.toDataURL(mimeType, quality);
+      return canvas;
-
-      if (config.callback) {
-        config.callback(src);
-      }
-
-      return src;
     },
     /**
      * converts stage into an image.
@@ -11173,6 +11166,15 @@
       this.canvas.setSize(width, height);
       return this;
     },
+    _toKonvaCanvas: function(config) {
+      config = config || {};
+      config.width = config.width || this.getWidth();
+      config.height = config.height || this.getHeight();
+      config.x = config.x !== undefined ? config.x : this.getX();
+      config.y = config.y !== undefined ? config.y : this.getY();
+
+      return Konva.Node.prototype._toKonvaCanvas.call(this, config);
+    },
     /**
      * get/set width of layer.getter return width of stage. setter doing nothing.
      * if you want change width use `stage.width(value);`

src/BaseLayer.js

@@ -172,6 +172,15 @@
       this.canvas.setSize(width, height);
       return this;
     },
+    _toKonvaCanvas: function(config) {
+      config = config || {};
+      config.width = config.width || this.getWidth();
+      config.height = config.height || this.getHeight();
+      config.x = config.x !== undefined ? config.x : this.getX();
+      config.y = config.y !== undefined ? config.y : this.getY();
+
+      return Konva.Node.prototype._toKonvaCanvas.call(this, config);
+    },
     /**
      * get/set width of layer.getter return width of stage. setter doing nothing.
      * if you want change width use `stage.width(value);`

src/Node.js

@@ -180,12 +180,9 @@
         drawBorder = conf.drawBorder || false;
 
       if (!width || !height) {
-        // make throw async, because we don't need to stop funcion
+        Konva.Util.error(
-        setTimeout(function() {
+          'Can not cache the node. Width or height of the node equals 0. Caching is skipped.'
-          Konva.Util.throw(
+        );
-            'Width or height of caching configuration equals 0. Caching is ignored.'
-          );
-        });
         return;
       }
 
@@ -1585,8 +1582,8 @@
       var box = this.getClientRect();
 
       var stage = this.getStage(),
-        x = config.x || box.x,
+        x = config.x !== undefined ? config.x : box.x,
-        y = config.y || box.y,
+        y = config.y !== undefined ? config.y : box.y,
         pixelRatio = config.pixelRatio || 1,
         canvas = new Konva.SceneCanvas({
           width: config.width || box.width || (stage ? stage.getWidth() : 0),
@@ -1647,7 +1644,11 @@
       config = config || {};
       var mimeType = config.mimeType || null,
         quality = config.quality || null;
-      return this._toKonvaCanvas(config).toDataURL(mimeType, quality);
+      var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
+      if (config.callback) {
+        config.callback(url);
+      }
+      return url;
     },
     /**
      * converts node into an image.  Since the toImage
@@ -1678,8 +1679,10 @@
       if (!config || !config.callback) {
         throw 'callback required for toImage method config argument';
       }
+      var callback = config.callback;
+      delete config.callback;
       Konva.Util._getImage(this.toDataURL(config), function(img) {
-        config.callback(img);
+        callback(img);
       });
     },
     setSize: function(size) {

src/Stage.js

@@ -232,12 +232,10 @@
     getContent: function() {
       return this.content;
     },
-    toDataURL: function(config) {
+    _toKonvaCanvas: function(config) {
       config = config || {};
 
-      var mimeType = config.mimeType || null,
+      var x = config.x || 0,
-        quality = config.quality || null,
-        x = config.x || 0,
         y = config.y || 0,
         canvas = new Konva.SceneCanvas({
           width: config.width || this.getWidth(),
@@ -255,24 +253,16 @@
         if (!layer.isVisible()) {
           return;
         }
-        var width = layer.getCanvas().getWidth();
+        var layerCanvas = layer._toKonvaCanvas(config);
-        var height = layer.getCanvas().getHeight();
-        var ratio = layer.getCanvas().getPixelRatio();
         _context.drawImage(
-          layer.getCanvas()._canvas,
+          layerCanvas._canvas,
-          0,
+          x,
-          0,
+          y,
-          width / ratio,
+          layerCanvas.getWidth() / layerCanvas.getPixelRatio(),
-          height / ratio
+          layerCanvas.getHeight() / layerCanvas.getPixelRatio()
         );
       });
-      var src = canvas.toDataURL(mimeType, quality);
+      return canvas;
-
-      if (config.callback) {
-        config.callback(src);
-      }
-
-      return src;
     },
     /**
      * converts stage into an image.

test/unit/Node-test.js

@@ -1,4 +1,4 @@
-suite('Node', function() {
+suite.only('Node', function() {
   // ======================================================
   test('getType and getClassName', function() {
     var stage = addStage();

test/unit/Stage-test.js

@@ -1046,19 +1046,19 @@ suite('Stage', function() {
     assert.equal(dblicks, 1, 'first dbclick registered');
   });
 
-  test('toDataURL in sync way', function() {
+  test('toCanvas in sync way', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     var circle = new Konva.Circle({
       x: stage.width() / 2,
       y: stage.height() / 2,
-      fill: 'red',
+      fill: 'black',
       radius: 50
     });
     layer.add(circle);
     stage.add(layer);
 
-    compareCanvases(stage.toCanvas(), layer.toCanvas());
+    compareCanvases(stage.toCanvas(), layer.toCanvas(), 200);
   });
 
   test('toDataURL with hidden layer', function() {
@@ -1078,6 +1078,36 @@ suite('Stage', function() {
     assert.equal(stage.toDataURL() === stageDataUrl, false);
   });
 
+  test('toDataURL works as toCanvas', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      fill: 'red',
+      radius: 50
+    });
+    layer.add(circle);
+    stage.add(layer);
+
+    assert.equal(stage.toDataURL(), stage.toCanvas().toDataURL());
+  });
+
+  test('toDataURL should no relate on stage size', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      fill: 'red',
+      radius: stage.height() * 0.6
+    });
+    layer.add(circle);
+    stage.add(layer);
+
+    compareCanvases(stage.toCanvas(circle.getClientRect()), circle.toCanvas());
+  });
+
   test('toCanvas with large size', function() {
     var stage = addStage();
     var layer = new Konva.Layer();