From 37fbeb9eecffc5f130d9a3db382b1f5dcbcfb0ae Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sat, 27 Oct 2018 17:18:31 +0200
Subject: [PATCH] Fix interaction between filters on restore (#5346)

---
 src/shapes/image.class.js | 10 +++++++---
 test/unit/image.js        | 23 ++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js
index 1a6c9af3def..6e3af836d1b 100644
--- 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
index 90f86cdefdb..5218a95ba52 100644
--- 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) {