diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index 8b08b6f66df..872f32f06c2 100644 --- 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 index d99c18751c0..ec50e8c1a4f 100644 --- 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'); });