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

Fix for IE11 IndexSizeError for negative source crops (#5428)

Browse source 
* Fix for IE11 IndexSizeError for negative source crops
This commit is contained in:
John Dean 2019-01-12 18:27:59 -06:00 committed by Andrea Bogazzi
parent 210854f572
commit 1cf38e1886
4 changed files with 71 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.travis.yml
View file

@ -85,14 +85,14 @@ jobs:
script: npm run build:fast && npm run test:visual
- stage: Visual Tests
env: LAUNCHER=Chrome
install: npm install testem@1.18.4 qunit@2.6.1
install: npm install testem@1.18.4 qunit@2.6.2
script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
addons:
apt:
packages: # avoid installing packages
- stage: Visual Tests
env: LAUNCHER=Firefox
install: npm install testem@1.18.4 qunit@2.6.1
install: npm install testem@1.18.4 qunit@2.6.2
script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
addons:
apt:

2
package.json
View file

@ -68,7 +68,7 @@
"eslint": "4.18.x",
"istanbul": "0.4.x",
"onchange": "^3.x.x",
"qunit": "^2.6.1",
"qunit": "2.6.2",
"testem": "^1.18.4",
"uglify-js": "3.3.x",
"pixelmatch": "^4.0.2",

17
src/shapes/image.class.js
View file

@ -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);
},
/**

96
test/unit/image.js
View file

@ -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() {
@ -780,4 +780,26 @@
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) {
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');
}
});
});
})();