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');