From de142eecbb6bf78922f7a635ac4ffd0ed0d308cb Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 30 Sep 2018 14:37:00 -0400 Subject: [PATCH] fixed (#5282) --- src/static_canvas.class.js | 36 +++++++++++++++++++++---------- test/unit/canvas_static.js | 43 ++++++++++++++++++++++++++------------ 2 files changed, 55 insertions(+), 24 deletions(-) diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index bc15a990..a3a82af7 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -14,6 +14,8 @@ toFixed = fabric.util.toFixed, transformPoint = fabric.util.transformPoint, invertTransform = fabric.util.invertTransform, + getNodeCanvas = fabric.util.getNodeCanvas, + createCanvasElement = fabric.util.createCanvasElement, CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element'); @@ -59,6 +61,9 @@ * Backwards incompatibility note: The "backgroundImageOpacity" * and "backgroundImageStretch" properties are deprecated since 1.3.9. * Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}. + * since 2.4.0 image caching is active, please when putting an image as background, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching * @type fabric.Image * @default */ @@ -79,6 +84,9 @@ * Backwards incompatibility note: The "overlayImageLeft" * and "overlayImageTop" properties are deprecated since 1.3.9. * Use {@link fabric.Image#left} and {@link fabric.Image#top}. + * since 2.4.0 image caching is active, please when putting an image as overlay, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching * @type fabric.Image * @default */ @@ -459,13 +467,18 @@ __setBgOverlayImage: function(property, image, callback, options) { if (typeof image === 'string') { fabric.util.loadImage(image, function(img) { - img && (this[property] = new fabric.Image(img, options)); + if (img) { + var instance = new fabric.Image(img, options); + this[property] = instance; + instance.canvas = this; + } callback && callback(img); }, this, options && options.crossOrigin); } else { options && image.setOptions(options); this[property] = image; + image && (image.canvas = this); callback && callback(image); } @@ -490,7 +503,7 @@ * @private */ _createCanvasElement: function() { - var element = fabric.util.createCanvasElement(); + var element = createCanvasElement(); if (!element) { throw CANVAS_INIT_ERROR; } @@ -508,20 +521,21 @@ * @param {Object} [options] Options object */ _initOptions: function (options) { + var lowerCanvasEl = this.lowerCanvasEl; this._setOptions(options); - this.width = this.width || parseInt(this.lowerCanvasEl.width, 10) || 0; - this.height = this.height || parseInt(this.lowerCanvasEl.height, 10) || 0; + this.width = this.width || parseInt(lowerCanvasEl.width, 10) || 0; + this.height = this.height || parseInt(lowerCanvasEl.height, 10) || 0; if (!this.lowerCanvasEl.style) { return; } - this.lowerCanvasEl.width = this.width; - this.lowerCanvasEl.height = this.height; + lowerCanvasEl.width = this.width; + lowerCanvasEl.height = this.height; - this.lowerCanvasEl.style.width = this.width + 'px'; - this.lowerCanvasEl.style.height = this.height + 'px'; + lowerCanvasEl.style.width = this.width + 'px'; + lowerCanvasEl.style.height = this.height + 'px'; this.viewportTransform = this.viewportTransform.slice(); }, @@ -1769,7 +1783,7 @@ * `null` if canvas element or context can not be initialized */ supports: function (methodName) { - var el = fabric.util.createCanvasElement(); + var el = createCanvasElement(); if (!el || !el.getContext) { return null; @@ -1824,11 +1838,11 @@ if (fabric.isLikelyNode) { fabric.StaticCanvas.prototype.createPNGStream = function() { - var impl = fabric.util.getNodeCanvas(this.lowerCanvasEl); + var impl = getNodeCanvas(this.lowerCanvasEl); return impl && impl.createPNGStream(); }; fabric.StaticCanvas.prototype.createJPEGStream = function(opts) { - var impl = fabric.util.getNodeCanvas(this.lowerCanvasEl); + var impl = getNodeCanvas(this.lowerCanvasEl); return impl && impl.createJPEGStream(opts); }; } diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index fb2769c2..97b6e9d5 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -1530,9 +1530,22 @@ QUnit.test('options in setBackgroundImage from URL', function(assert) { var done = assert.async(); canvas.setBackgroundImage(IMG_SRC, function() { + assert.equal(canvas.backgroundImage.canvas, canvas, 'canvas is referenced'); assert.equal(canvas.backgroundImage.left, 50); assert.equal(canvas.backgroundImage.originX, 'right'); + done(); + }, { + left: 50, + originX: 'right' + }); + }); + QUnit.test('options in setOverlayImage from URL', function(assert) { + var done = assert.async(); + canvas.setOverlayImage(IMG_SRC, function() { + assert.equal(canvas.overlayImage.canvas, canvas, 'canvas is referenced'); + assert.equal(canvas.overlayImage.left, 50); + assert.equal(canvas.overlayImage.originX, 'right'); done(); }, { left: 50, @@ -1674,23 +1687,11 @@ assert.equal(scaling, 1, 'retina is disabled, 1'); }); - //how to test with an exception? - /*QUnit.test('options in setBackgroundImage from invalid URL', function(assert) { - var done = assert.async(); - canvas.backgroundImage = null; - canvas.setBackgroundImage(IMG_SRC + '_not_exist', function( ) { - assert.equal(canvas.backgroundImage, null); - done(); - }, { - left: 50, - originX: 'right' - }); - });*/ - QUnit.test('options in setBackgroundImage from image instance', function(assert) { var done = assert.async(); createImageObject(function(imageInstance) { canvas.setBackgroundImage(imageInstance, function() { + assert.equal(canvas.backgroundImage.canvas, canvas, 'canvas get referenced'); assert.equal(canvas.backgroundImage.left, 100); assert.equal(canvas.backgroundImage.originX, 'center'); @@ -1702,6 +1703,22 @@ }); }); + QUnit.test('options in setOverlayImage from image instance', function(assert) { + var done = assert.async(); + createImageObject(function(imageInstance) { + canvas.setOverlayImage(imageInstance, function() { + assert.equal(canvas.overlayImage, imageInstance); + assert.equal(imageInstance.left, 100); + assert.equal(imageInstance.originX, 'center'); + assert.equal(imageInstance.canvas, canvas, 'canvas get referenced'); + done(); + }, { + left: 100, + originX: 'center' + }); + }); + }); + QUnit.test('createPNGStream', function(assert) { if (!fabric.isLikelyNode) { assert.ok(true, 'not supposed to run outside node');