Skip to content

Commit 7da4326

Browse files
andyedinboroughandyedinborough
committed
background-size fixes
generated gradients need a unique key (the same value can generate a different image based on background-size); fix so that a single value specified for background-size yields a scaled height as the second parameter
1 parent eb57b61 commit 7da4326

3 files changed

Lines changed: 44 additions & 22 deletions

File tree

‎src/Core.js‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,16 @@ _html2canvas.Util.getCSS = function (el, attribute, index) {
204204

205205
} else {
206206
val[ 0 ] = ( val[ 0 ].indexOf( "%" ) === -1 ) ? toPX( attribute + "X", val[ 0 ] ) : val[ 0 ];
207-
val[ 1 ] = ( val[ 1 ] === undefined ) ? val[ 0 ] : val[ 1 ]; // IE 9 doesn't return double digit always
207+
if(val[ 1 ] === undefined) {
208+
if(attribute === 'backgroundSize') {
209+
val[ 1 ] = 'auto';
210+
return val;
211+
}
212+
else {
213+
// IE 9 doesn't return double digit always
214+
val[ 1 ] = val[ 0 ];
215+
}
216+
}
208217
val[ 1 ] = ( val[ 1 ].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ];
209218
}
210219
} else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) {
@@ -292,10 +301,10 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroun
292301

293302
} else {
294303
if(prop === 'backgroundSize') {
295-
if(bgposition[0] === 'auto') { left = image.width; }
296-
if(bgposition[1] === 'auto') { topPos = image.height; }
304+
if(bgposition[0] === 'auto') {
305+
left = image.width;
297306

298-
if(left === undefined) {
307+
} else {
299308
if(bgposition[0].match(/contain|cover/)) {
300309
var resized = _html2canvas.Util.resizeBounds( image.width, image.height, bounds.width, bounds.height, bgposition[0] );
301310
left = resized.width;
@@ -310,17 +319,18 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroun
310319
}
311320
}
312321

313-
if(topPos === undefined) {
314-
if (bgposition[1].toString().indexOf("%") !== -1){
315-
percentage = (parseFloat(bgposition[1])/100);
316-
topPos = bounds.height * percentage;
317-
if(prop !== 'backgroundSize') {
318-
topPos -= (backgroundSize || image).height * percentage;
319-
}
320-
321-
} else {
322-
topPos = parseInt(bgposition[1],10);
322+
323+
if(bgposition[1] === 'auto') {
324+
topPos = left / image.width * image.height;
325+
} else if (bgposition[1].toString().indexOf("%") !== -1){
326+
percentage = (parseFloat(bgposition[1])/100);
327+
topPos = bounds.height * percentage;
328+
if(prop !== 'backgroundSize') {
329+
topPos -= (backgroundSize || image).height * percentage;
323330
}
331+
332+
} else {
333+
topPos = parseInt(bgposition[1],10);
324334
}
325335

326336
return [left, topPos];

‎src/Parse.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -666,12 +666,16 @@ _html2canvas.Parse = function (images, options) {
666666

667667
for(var imageIndex = backgroundImages.length; imageIndex-- > 0;) {
668668
backgroundImage = backgroundImages[imageIndex];
669-
669+
670670
if (!backgroundImage.args || backgroundImage.args.length === 0) {
671671
continue;
672672
}
673673

674-
image = loadImage(backgroundImage.method === 'url' ? backgroundImage.args[0] : backgroundImage.value);
674+
var key = backgroundImage.method === 'url' ?
675+
backgroundImage.args[0] :
676+
backgroundImage.value + '/' + element.__html2canvas__id + '/' + imageIndex;
677+
678+
image = loadImage(key);
675679

676680
// TODO add support for background-origin
677681
if (image) {

‎src/Preload.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,15 @@ _html2canvas.Preload = function( options ) {
9090
}
9191

9292
function getImages (el) {
93+
el.__html2canvas__id = uid++;
9394

9495
var contents = _html2canvas.Util.Children(el),
9596
i,
9697
background_image,
9798
background_images,
9899
src,
99100
img,
101+
bounds,
100102
elNodeType = false;
101103

102104
// Firefox fails with permission denied on pages with iframes
@@ -125,7 +127,9 @@ _html2canvas.Preload = function( options ) {
125127
}
126128

127129
background_images = _html2canvas.Util.parseBackgroundImage(background_image);
128-
while(!!(background_image = background_images.shift())) {
130+
for(var imageIndex = background_images.length; imageIndex-- > 0;) {
131+
background_image = background_images[imageIndex];
132+
129133
if(!background_image ||
130134
!background_image.method ||
131135
!background_image.args ||
@@ -138,17 +142,21 @@ _html2canvas.Preload = function( options ) {
138142
methods.loadImage(src);
139143

140144
} else if( background_image.method.match( /\-gradient$/ ) ) {
141-
img = _html2canvas.Generate.Gradient( background_image.value, _html2canvas.Util.Bounds( el ) );
145+
if(bounds === undefined) {
146+
bounds = _html2canvas.Util.Bounds( el );
147+
}
148+
149+
var key = background_image.value + '/' + el.__html2canvas__id + '/' + imageIndex;
150+
img = _html2canvas.Generate.Gradient( background_image.value, bounds);
142151

143152
if ( img !== undefined ){
144-
images[background_image.value] = {
153+
images[ key ] = {
145154
img: img,
146155
succeeded: true
147156
};
148157
images.numTotal++;
149158
images.numLoaded++;
150159
start();
151-
152160
}
153161
}
154162
}
@@ -216,7 +224,7 @@ _html2canvas.Preload = function( options ) {
216224
return;
217225
}
218226
if(!el.id) {
219-
el.id = '__html2cavas__' + (uid++);
227+
el.id = '__html2canvas__' + (uid++);
220228
}
221229
if(!injectStyle) {
222230
injectStyle = document.createElement('style');
@@ -382,7 +390,7 @@ _html2canvas.Preload = function( options ) {
382390
.forEach(removePseudoElements);
383391
}
384392
},
385-
393+
386394
renderingDone: function() {
387395
if (timeoutTimer) {
388396
window.clearTimeout(timeoutTimer);

0 commit comments

Comments
 (0)