Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-03-16 22:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed (#5282)

Browse source
This commit is contained in:
Andrea Bogazzi 2018-09-30 14:37:00 -04:00 committed by GitHub
parent cd20632d8e
commit de142eecbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/static_canvas.class.js
View file

@ -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 @@
* <b>Backwards incompatibility note:</b> 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 @@
* <b>Backwards incompatibility note:</b> 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);
};
}

43
test/unit/canvas_static.js
View file

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