Fix interaction between filters on restore (#5346)

fabricjs · Oct 27, 2018 · 37fbeb9 · 37fbeb9
1 parent 09e8af1
commit 37fbeb9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js
@@ -153,12 +153,16 @@
       this._element = element;
       this._originalElement = element;
       this._initConfig(options);
-      if (this.resizeFilter) {
-        this.applyResizeFilters();
-      }
       if (this.filters.length !== 0) {
         this.applyFilters();
       }
+      // resizeFilters work on the already filtered copy.
+      // we need to apply resizeFilters AFTER normal filters.
+      // applyResizeFilters is run more often than normal fiters
+      // and is triggered by user interactions rather than dev code
+      if (this.resizeFilter) {
+        this.applyResizeFilters();
+      }
       return this;
     },
 

diff --git a/test/unit/image.js b/test/unit/image.js
@@ -24,7 +24,6 @@
     return element;
   }
 
-
   var IMG_SRC     = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif'),
       IMG_WIDTH   = 276,
       IMG_HEIGHT  = 110;
@@ -184,6 +183,28 @@
     });
   });
 
+  QUnit.test('toObject with normal filter and resize filter', function(assert) {
+    var done = assert.async();
+    createImageObject(function(image) {
+      var filter = new fabric.Image.filters.Resize({resizeType: 'bilinear' });
+      image.resizeFilter = filter;
+      var filterBg = new fabric.Image.filters.Brightness({ brightness: 0.8 });
+      image.filters = [filterBg];
+      image.scaleX = 0.3;
+      image.scaleY = 0.3;
+      var toObject = image.toObject();
+      assert.deepEqual(toObject.resizeFilter, filter.toObject(), 'the filter is in object form now');
+      assert.deepEqual(toObject.filters[0], filterBg.toObject(), 'the filter is in object form now brightness');
+      fabric.Image.fromObject(toObject, function(imageFromObject) {
+        var filterFromObj = imageFromObject.resizeFilter;
+        var brightnessFromObj = imageFromObject.filters[0];
+        assert.ok(filterFromObj instanceof fabric.Image.filters.Resize, 'should inherit from fabric.Image.filters.Resize');
+        assert.ok(brightnessFromObj instanceof fabric.Image.filters.Brightness, 'should inherit from fabric.Image.filters.Resize');
+        done();
+      });
+    });
+  });
+
   QUnit.test('toObject with applied resize filter', function(assert) {
     var done = assert.async();
     createImageObject(function(image) {