fix imageToObject with resize filters (#2954)

width and height get stored as before filtering in case of filters with type resize.
fabricjs · May 9, 2016 · a9cf96b · a9cf96b
1 parent 3ab5cdb
commit a9cf96b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js
@@ -205,26 +205,36 @@
      * @return {Object} Object representation of an instance
      */
     toObject: function(propertiesToInclude) {
-      var filters = [ ], element = this._originalElement;
+      var filters = [ ], resizeFilters = [ ],
+          element = this._originalElement,
+          scaleX = 1, scaleY = 1;
+
       this.filters.forEach(function(filterObj) {
         if (filterObj) {
+          if (filterObj.type === 'Resize') {
+            scaleX *= filterObj.scaleX;
+            scaleY *= filterObj.scaleY;
+          }
           filters.push(filterObj.toObject());
         }
       });
+
+      this.resizeFilters.forEach(function(filterObj) {
+        filterObj && resizeFilters.push(filterObj.toObject());
+      });
+
       var object = extend(this.callSuper('toObject', propertiesToInclude), {
         src: element ? element.src || element._src : '',
         filters: filters,
+        resizeFilters: resizeFilters,
         crossOrigin: this.crossOrigin,
         alignX: this.alignX,
         alignY: this.alignY,
         meetOrSlice: this.meetOrSlice
       });
 
-      if (this.resizeFilters.length > 0) {
-        object.resizeFilters = this.resizeFilters.map(function(filterObj) {
-          return filterObj && filterObj.toObject();
-        });
-      }
+      object.width /= scaleX;
+      object.height /= scaleY;
 
       if (!this.includeDefaultValues) {
         this._removeDefaultValues(object);

diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js
@@ -81,6 +81,7 @@
     'backgroundColor':          '',
     'clipTo':                   null,
     'filters':                  [],
+    'resizeFilters':            [],    
     'fillRule':                 'nonzero',
     'globalCompositeOperation': 'source-over',
     'transformMatrix':          null,

diff --git a/test/unit/image.js b/test/unit/image.js
@@ -41,6 +41,7 @@
     'backgroundColor':          '',
     'clipTo':                   null,
     'filters':                  [],
+    'resizeFilters':            [],    
     'fillRule':                 'nonzero',
     'globalCompositeOperation': 'source-over',
     'skewX':                    0,
@@ -156,6 +157,34 @@
     });
   });
 
+  asyncTest('toObject with applied resize filter', function() {
+    createImageObject(function(image) {
+      ok(typeof image.toObject == 'function');
+      var filter = new fabric.Image.filters.Resize({resizeType: 'bilinear', scaleX: 0.5, scaleY: 0.5});
+      image.filters.push(filter);
+      var width = image.width, height = image.height;
+      ok(image.filters[0] instanceof fabric.Image.filters.Resize, 'should inherit from fabric.Image.filters.Resize');
+      image.applyFilters(function() {
+        equal(image.width, width / 2, 'width should be halved now');
+        equal(image.height, height / 2, 'height should be halved now');
+        var toObject = image.toObject();
+        deepEqual(toObject.filters[0], filter.toObject());
+        equal(toObject.width, width, 'width is stored as before filters');
+        equal(toObject.height, height, 'height is stored as before filters');
+        fabric.Image.fromObject(toObject, function(imageFromObject) {
+          var filterFromObj = imageFromObject.filters[0];
+          ok(filterFromObj instanceof fabric.Image.filters.Resize, 'should inherit from fabric.Image.filters.Resize');
+          equal(filterFromObj.scaleY, 0.5);
+          equal(filterFromObj.scaleX, 0.5);
+          //equal(imageFromObject.width, width, 'on image reload width is halved again');
+          //equal(imageFromObject.height, height, 'on image reload width is halved again');
+          start();
+        });
+      });
+    });
+  });
+
+
   // asyncTest('toObject without default values', function() {
   //   createImageObject(function(image) {