To data url and zoom (#5139)

* added a new option

* deleted unused method

* passes

* ok there was an error

* reused util

* ok

* extra console.log

* fixed

src/brushes/pattern_brush.class.js

@@ -9,7 +9,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
 
     var dotWidth = 20,
         dotDistance = 5,
-        patternCanvas = fabric.document.createElement('canvas'),
+        patternCanvas = fabric.util.createCanvasElement(),
         patternCtx = patternCanvas.getContext('2d');
 
     patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;

src/canvas.class.js

@@ -702,19 +702,12 @@
         mouseXSign: 1,
         mouseYSign: 1,
         shiftKey: e.shiftKey,
-        altKey: e[this.centeredKey]
+        altKey: e[this.centeredKey],
+        original: fabric.util.saveObjectTransform(target),
       };
 
-      this._currentTransform.original = {
-        left: target.left,
-        top: target.top,
-        scaleX: target.scaleX,
-        scaleY: target.scaleY,
-        skewX: target.skewX,
-        skewY: target.skewY,
-        originX: origin.x,
-        originY: origin.y
-      };
+      this._currentTransform.original.originX = origin.x;
+      this._currentTransform.original.originY = origin.y;
 
       this._resetCurrentTransform();
       this._beforeTransform(e);
@@ -1095,18 +1088,6 @@
       this.upperCanvasEl.style.cursor = value;
     },
 
-    /**
-     * @param {fabric.Object} target to reset transform
-     * @private
-     */
-    _resetObjectTransform: function (target) {
-      target.scaleX = 1;
-      target.scaleY = 1;
-      target.skewX = 0;
-      target.skewY = 0;
-      target.rotate(0);
-    },
-
     /**
      * @private
      * @param {CanvasRenderingContext2D} ctx to draw the selection on

src/mixins/canvas_serialization.mixin.js

@@ -201,7 +201,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
    * @param {Object} [callback] Receives cloned instance as a first argument
    */
   cloneWithoutData: function(callback) {
-    var el = fabric.document.createElement('canvas');
+    var el = fabric.util.createCanvasElement();
 
     el.width = this.width;
     el.height = this.height;

src/mixins/itext_key_behavior.mixin.js

@@ -12,9 +12,11 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
     this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', '');
     this.hiddenTextarea.setAttribute('wrap', 'off');
     var style = this._calcTextareaPosition();
+    // line-height: 1px; was removed from the style to fix this:
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=870966
     this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top +
     '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' +
-    ' line-height: 1px; paddingｰtop: ' + style.fontSize + ';';
+    ' paddingｰtop: ' + style.fontSize + ';';
     fabric.document.body.appendChild(this.hiddenTextarea);
 
     fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));

src/shapes/object.class.js

@@ -617,7 +617,7 @@
      */
     _createCacheCanvas: function() {
       this._cacheProperties = {};
-      this._cacheCanvas = fabric.document.createElement('canvas');
+      this._cacheCanvas = fabric.util.createCanvasElement();
       this._cacheContext = this._cacheCanvas.getContext('2d');
       this._updateCacheCanvas();
       // if canvas gets created, is empty, so dirty.
@@ -1451,17 +1451,24 @@
      * @param {Number} [options.width] Cropping width. Introduced in v1.2.14
      * @param {Number} [options.height] Cropping height. Introduced in v1.2.14
      * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4
+     * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
      * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
      */
     toDataURL: function(options) {
       options || (options = { });
 
+      var origParams = fabric.util.saveObjectTransform(this);
+
+      if (options.withoutTransform) {
+        fabric.util.resetObjectTransform(this);
+      }
+
       var el = fabric.util.createCanvasElement(),
-          boundingRect = this.getBoundingRect();
+          // skip canvas zoom and calculate with setCoords now.
+          boundingRect = this.getBoundingRect(true, true);
 
       el.width = boundingRect.width;
       el.height = boundingRect.height;
-      fabric.util.wrapElement(el, 'div');
       var canvas = new fabric.StaticCanvas(el, {
         enableRetinaScaling: options.enableRetinaScaling,
         renderOnAddRemove: false,
@@ -1476,11 +1483,6 @@
         canvas.backgroundColor = '#fff';
       }
 
-      var origParams = {
-        left: this.left,
-        top: this.top
-      };
-
       this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center');
 
       var originalCanvas = this.canvas;

src/util/misc.js

@@ -656,6 +656,12 @@
       return fabric.util.multiplyTransformMatrices(scaleMatrix, skewMatrixX, true);
     },
 
+    /**
+     * reset an object transform state to neutral. Top and left are not accounted for
+     * @static
+     * @memberOf fabric.util
+     * @param  {fabric.Object} target object to transform
+     */
     resetObjectTransform: function (target) {
       target.scaleX = 1;
       target.scaleY = 1;
@@ -666,6 +672,27 @@
       target.rotate(0);
     },
 
+    /**
+     * Extract Object transform values
+     * @static
+     * @memberOf fabric.util
+     * @param  {fabric.Object} target object to read from
+     * @return {Object} Components of transform
+     */
+    saveObjectTransform: function (target) {
+      return {
+        scaleX: target.scaleX,
+        scaleY: target.scaleY,
+        skewX: target.skewX,
+        skewY: target.skewY,
+        angle: target.angle,
+        left: target.left,
+        flipX: target.flipX,
+        flipY: target.flipY,
+        top: target.top
+      };
+    },
+
     /**
      * Returns string representation of function body
      * @param {Function} fn Function to get body of

test/unit/image.js

@@ -656,8 +656,8 @@
       var data1 = image.toDataURL();
       var data2 = image.toDataURL();
       var data3 = image.toDataURL();
-      assert.equal(data1, data2, 'dataurl does not change 1');
-      assert.equal(data1, data3, 'dataurl does not change 2');
+      assert.ok(data1 === data2, 'dataurl does not change 1');
+      assert.ok(data1 === data3, 'dataurl does not change 2');
       done();
     });
   });

test/unit/util.js

@@ -792,6 +792,30 @@
     assert.equal(rect.angle, 0);
   });
 
+  QUnit.test('saveObjectTransform', function(assert) {
+    assert.ok(typeof fabric.util.saveObjectTransform === 'function');
+    var rect = new fabric.Rect({
+      top: 1,
+      width: 100,
+      height: 100,
+      angle: 30,
+      scaleX: 2,
+      scaleY: 1,
+      flipX: true,
+      flipY: true,
+      skewX: 30,
+      skewY: 30
+    });
+    var transform = fabric.util.saveObjectTransform(rect);
+    assert.equal(transform.skewX, 30);
+    assert.equal(transform.skewY, 30);
+    assert.equal(transform.scaleX, 2);
+    assert.equal(transform.scaleY, 1);
+    assert.equal(transform.flipX, true);
+    assert.equal(transform.flipY, true);
+    assert.equal(transform.angle, 30);
+  });
+
   QUnit.test('invertTransform', function(assert) {
     assert.ok(typeof fabric.util.invertTransform === 'function');
     var m1 = [1, 2, 3, 4, 5, 6], m3;