Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for IE11 IndexSizeError for negative source crops #5428

Merged
merged 8 commits into from
Jan 13, 2019
Merged

Fix for IE11 IndexSizeError for negative source crops #5428

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9694c9a
Fix for IE11 IndexSizeError for negative source crops
CaptEmulation Dec 13, 2018
d8da563
Merge remote-tracking branch 'upstream/master' into ie11-image-fill-fix
CaptEmulation Jan 10, 2019
884bd38
update from review and test
CaptEmulation Jan 10, 2019
2a9cc28
Update from review
CaptEmulation Jan 11, 2019
5cebf90
Update .travis.yml
asturur Jan 12, 2019
2cdb7db
Update package.json
asturur Jan 12, 2019
9103be1
Update .travis.yml
asturur Jan 12, 2019
fbf65eb
Update image.class.js
asturur Jan 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions dist/fabric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19931,14 +19931,15 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
},

_renderFill: function(ctx) {
var w = this.width, h = this.height, sW = w * this._filterScalingX, sH = h * this._filterScalingY,
x = -w / 2, y = -h / 2, elementToDraw = this._element;
elementToDraw && ctx.drawImage(elementToDraw,
this.cropX * this._filterScalingX,
this.cropY * this._filterScalingY,
sW,
sH,
x, y, w, h);
var elementToDraw = this._element,
w = this.width, h = this.height,
sW = Math.min(elementToDraw.naturalWidth || elementToDraw.width, w * this._filterScalingX),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
sW = Math.min(elementToDraw.naturalWidth || elementToDraw.width, w * this._filterScalingX),
sW = Math.min(elementToDraw.naturalWidth || elementToDraw.width, w) * this._filterScalingX,

we want to limit the source area, this._filterScaling apply anyway

sH = Math.min(elementToDraw.naturalHeight || elementToDraw.height, h * this._filterScalingY),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
sH = Math.min(elementToDraw.naturalHeight || elementToDraw.height, h * this._filterScalingY),
sH = Math.min(elementToDraw.naturalHeight || elementToDraw.height, h) * this._filterScalingY,

x = -w / 2, y = -h / 2,
sX = Math.max(0, this.cropX * this._filterScalingX),
sY = Math.max(0, this.cropY * this._filterScalingY);

elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, w, h);
},

/**
Expand Down
2 changes: 1 addition & 1 deletion dist/fabric.min.js
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 9 additions & 8 deletions src/shapes/image.class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,14 +505,15 @@
},

_renderFill: function(ctx) {
var w = this.width, h = this.height, sW = w * this._filterScalingX, sH = h * this._filterScalingY,
x = -w / 2, y = -h / 2, elementToDraw = this._element;
elementToDraw && ctx.drawImage(elementToDraw,
this.cropX * this._filterScalingX,
this.cropY * this._filterScalingY,
sW,
sH,
x, y, w, h);
var elementToDraw = this._element,
w = this.width, h = this.height,
sW = Math.min(elementToDraw.naturalWidth || elementToDraw.width, w * this._filterScalingX),
sH = Math.min(elementToDraw.naturalHeight || elementToDraw.height, h * this._filterScalingY),
x = -w / 2, y = -h / 2,
sX = Math.max(0, this.cropX * this._filterScalingX),
sY = Math.max(0, this.cropY * this._filterScalingY);

elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, w, h);
},

/**
Expand Down
97 changes: 60 additions & 37 deletions test/unit/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,43 +29,43 @@
IMG_HEIGHT = 110;

var REFERENCE_IMG_OBJECT = {
'version': fabric.version,
'type': 'image',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects
'height': IMG_HEIGHT, // or does it now?
'fill': 'rgb(0,0,0)',
'stroke': null,
'strokeWidth': 0,
'strokeDashArray': null,
'strokeLineCap': 'butt',
'strokeDashOffset': 0,
'strokeLineJoin': 'miter',
'strokeMiterLimit': 4,
'scaleX': 1,
'scaleY': 1,
'angle': 0,
'flipX': false,
'flipY': false,
'opacity': 1,
'src': IMG_SRC,
'shadow': null,
'visible': true,
'backgroundColor': '',
'clipTo': null,
'filters': [],
'fillRule': 'nonzero',
'paintFirst': 'fill',
'globalCompositeOperation': 'source-over',
'skewX': 0,
'skewY': 0,
'transformMatrix': null,
'crossOrigin': '',
'cropX': 0,
'cropY': 0
version: fabric.version,
type: 'image',
originX: 'left',
originY: 'top',
left: 0,
top: 0,
width: IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects
height: IMG_HEIGHT, // or does it now?
fill: 'rgb(0,0,0)',
stroke: null,
strokeWidth: 0,
strokeDashArray: null,
strokeLineCap: 'butt',
strokeDashOffset: 0,
strokeLineJoin: 'miter',
strokeMiterLimit: 4,
scaleX: 1,
scaleY: 1,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
src: IMG_SRC,
shadow: null,
visible: true,
backgroundColor: '',
clipTo: null,
filters: [],
fillRule: 'nonzero',
paintFirst: 'fill',
globalCompositeOperation: 'source-over',
skewX: 0,
skewY: 0,
transformMatrix: null,
crossOrigin: '',
cropX: 0,
cropY: 0
};

function _createImageElement() {
Expand Down Expand Up @@ -780,4 +780,27 @@
done();
});
});

QUnit.test('_renderFill respects source boundaries ', function (assert) {
fabric.Image.prototype._renderFill.call({
cropX: -1,
cropY: -1,
_filterScalingX: 1,
_filterScalingY: 1,
width: 300,
height: 300,
_element: {
naturalWidth: 200,
height: 200,
},
}, {
drawImage: function(src, sX, sY, sW, sH) {
console.log(sX, sY, sW, sH);
assert.ok(sX >= 0, 'sX should be positive');
assert.ok(sY >= 0, 'sY should be positive');
assert.ok(sW <= 200, 'sW should not be larger than image width');
assert.ok(sH <= 200, 'sH should not be larger than image height');
}
});
});
})();