diff --git a/src/Core.js b/src/Core.js index 3efa8a2..dc2c5d6 100644 --- a/src/Core.js +++ b/src/Core.js @@ -204,7 +204,16 @@ _html2canvas.Util.getCSS = function (el, attribute, index) { } else { val[ 0 ] = ( val[ 0 ].indexOf( "%" ) === -1 ) ? toPX( attribute + "X", val[ 0 ] ) : val[ 0 ]; - val[ 1 ] = ( val[ 1 ] === undefined ) ? val[ 0 ] : val[ 1 ]; // IE 9 doesn't return double digit always + if(val[ 1 ] === undefined) { + if(attribute === 'backgroundSize') { + val[ 1 ] = 'auto'; + return val; + } + else { + // IE 9 doesn't return double digit always + val[ 1 ] = val[ 0 ]; + } + } val[ 1 ] = ( val[ 1 ].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ]; } } else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) { @@ -292,10 +301,10 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroun } else { if(prop === 'backgroundSize') { - if(bgposition[0] === 'auto') { left = image.width; } - if(bgposition[1] === 'auto') { topPos = image.height; } + if(bgposition[0] === 'auto') { + left = image.width; - if(left === undefined) { + } else { if(bgposition[0].match(/contain|cover/)) { var resized = _html2canvas.Util.resizeBounds( image.width, image.height, bounds.width, bounds.height, bgposition[0] ); left = resized.width; @@ -310,17 +319,18 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroun } } - if(topPos === undefined) { - if (bgposition[1].toString().indexOf("%") !== -1){ - percentage = (parseFloat(bgposition[1])/100); - topPos = bounds.height * percentage; - if(prop !== 'backgroundSize') { - topPos -= (backgroundSize || image).height * percentage; - } - - } else { - topPos = parseInt(bgposition[1],10); + + if(bgposition[1] === 'auto') { + topPos = left / image.width * image.height; + } else if (bgposition[1].toString().indexOf("%") !== -1){ + percentage = (parseFloat(bgposition[1])/100); + topPos = bounds.height * percentage; + if(prop !== 'backgroundSize') { + topPos -= (backgroundSize || image).height * percentage; } + + } else { + topPos = parseInt(bgposition[1],10); } return [left, topPos]; diff --git a/src/Parse.js b/src/Parse.js index af8641a..265c797 100644 --- a/src/Parse.js +++ b/src/Parse.js @@ -666,12 +666,16 @@ _html2canvas.Parse = function (images, options) { for(var imageIndex = backgroundImages.length; imageIndex-- > 0;) { backgroundImage = backgroundImages[imageIndex]; - + if (!backgroundImage.args || backgroundImage.args.length === 0) { continue; } - image = loadImage(backgroundImage.method === 'url' ? backgroundImage.args[0] : backgroundImage.value); + var key = backgroundImage.method === 'url' ? + backgroundImage.args[0] : + backgroundImage.value + '/' + element.__html2canvas__id + '/' + imageIndex; + + image = loadImage(key); // TODO add support for background-origin if (image) { diff --git a/src/Preload.js b/src/Preload.js index 6140915..22cf4fa 100644 --- a/src/Preload.js +++ b/src/Preload.js @@ -90,6 +90,7 @@ _html2canvas.Preload = function( options ) { } function getImages (el) { + el.__html2canvas__id = uid++; var contents = _html2canvas.Util.Children(el), i, @@ -97,6 +98,7 @@ _html2canvas.Preload = function( options ) { background_images, src, img, + bounds, elNodeType = false; // Firefox fails with permission denied on pages with iframes @@ -125,7 +127,9 @@ _html2canvas.Preload = function( options ) { } background_images = _html2canvas.Util.parseBackgroundImage(background_image); - while(!!(background_image = background_images.shift())) { + for(var imageIndex = background_images.length; imageIndex-- > 0;) { + background_image = background_images[imageIndex]; + if(!background_image || !background_image.method || !background_image.args || @@ -138,17 +142,21 @@ _html2canvas.Preload = function( options ) { methods.loadImage(src); } else if( background_image.method.match( /\-gradient$/ ) ) { - img = _html2canvas.Generate.Gradient( background_image.value, _html2canvas.Util.Bounds( el ) ); + if(bounds === undefined) { + bounds = _html2canvas.Util.Bounds( el ); + } + + var key = background_image.value + '/' + el.__html2canvas__id + '/' + imageIndex; + img = _html2canvas.Generate.Gradient( background_image.value, bounds); if ( img !== undefined ){ - images[background_image.value] = { + images[ key ] = { img: img, succeeded: true }; images.numTotal++; images.numLoaded++; start(); - } } } @@ -216,7 +224,7 @@ _html2canvas.Preload = function( options ) { return; } if(!el.id) { - el.id = '__html2cavas__' + (uid++); + el.id = '__html2canvas__' + (uid++); } if(!injectStyle) { injectStyle = document.createElement('style'); @@ -382,7 +390,7 @@ _html2canvas.Preload = function( options ) { .forEach(removePseudoElements); } }, - + renderingDone: function() { if (timeoutTimer) { window.clearTimeout(timeoutTimer);