canvas overlay/background color export

fabricjs · Jun 26, 2021 · 2de4db2 · 2de4db2
1 parent 7f75412
commit 2de4db2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 16 deletions.
diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js
@@ -1202,24 +1202,32 @@
      * @private
      */
     __serializeBgOverlay: function(methodName, propertiesToInclude) {
-      var data = { }, bgImage = this.backgroundImage, overlay = this.overlayImage;
+      var data = {}, bgImage = this.backgroundImage, overlayImage = this.overlayImage,
+          bgColor = this.backgroundColor, overlayColor = this.overlayColor;
 
-      if (this.backgroundColor) {
-        data.background = this.backgroundColor.toObject
-          ? this.backgroundColor.toObject(propertiesToInclude)
-          : this.backgroundColor;
+      if (bgColor && bgColor.toObject) {
+        if (!bgColor.excludeFromExport) {
+          data.background = bgColor.toObject(propertiesToInclude);
+        }
+      }
+      else if (bgColor) {
+        data.background = bgColor;
       }
 
-      if (this.overlayColor) {
-        data.overlay = this.overlayColor.toObject
-          ? this.overlayColor.toObject(propertiesToInclude)
-          : this.overlayColor;
+      if (overlayColor && overlayColor.toObject) {
+        if (!overlayColor.excludeFromExport) {
+          data.overlay = overlayColor.toObject(propertiesToInclude);
+        }
       }
+      else if (overlayColor) {
+        data.overlay = overlayColor;
+      }
+
       if (bgImage && !bgImage.excludeFromExport) {
         data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude);
       }
-      if (overlay && !overlay.excludeFromExport) {
-        data.overlayImage = this._toObject(overlay, methodName, propertiesToInclude);
+      if (overlayImage && !overlayImage.excludeFromExport) {
+        data.overlayImage = this._toObject(overlayImage, methodName, propertiesToInclude);
       }
 
       return data;

diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js
@@ -1049,22 +1049,42 @@
     assert.equal(canvas.toObject().objects.length, 1, 'only one object gets exported');
   });
 
-  QUnit.test('toObject excludeFromExport bgImage overlay', function(assert) {
+  QUnit.test('toObject excludeFromExport bg overlay', function(assert) {
     var rect = makeRect(), rect2 = makeRect(), rect3 = makeRect();
+    var bgColor = new fabric.Gradient({
+      type: 'linear',
+      colorStops: [
+        { offset: 0, color: 'black' },
+        { offset: 1, color: 'white' },
+      ],
+      coords: {
+        x1: 0,
+        x2: 300,
+        y1: 0,
+        y2: 0,
+      },
+    });
     canvas.clear();
     canvas.backgroundImage = rect;
     canvas.overlayImage = rect2;
+    canvas.backgroundColor = bgColor;
+    canvas.setOverlayColor('red');
     canvas.add(rect3);
     var rectToObject = rect.toObject();
     var rect2ToObject = rect2.toObject();
+    var bgc2ToObject = bgColor.toObject();
     var canvasToObject = canvas.toObject();
-    assert.deepEqual(canvasToObject.backgroundImage, rectToObject, 'background exported');
-    assert.deepEqual(canvasToObject.overlayImage, rect2ToObject, 'overlay exported');
+    assert.deepEqual(canvasToObject.backgroundImage, rectToObject, 'background image exported');
+    assert.deepEqual(canvasToObject.overlayImage, rect2ToObject, 'overlay image exported');
+    assert.deepEqual(canvasToObject.background, bgc2ToObject, 'background color exported');
+    assert.equal(canvasToObject.overlay, 'red', 'overlay color exported');
     rect.excludeFromExport = true;
     rect2.excludeFromExport = true;
+    bgColor.excludeFromExport = true;
     canvasToObject = canvas.toObject();
-    assert.equal(canvasToObject.backgroundImage, undefined, 'background not exported');
-    assert.equal(canvasToObject.overlayImage, undefined, 'overlay not exported');
+    assert.equal(canvasToObject.backgroundImage, undefined, 'background image not exported');
+    assert.equal(canvasToObject.overlayImage, undefined, 'overlay image not exported');
+    assert.equal(canvasToObject.background, undefined, 'background color not exported');
   });