mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
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
This commit is contained in:
parent
eb57b61859
commit
7da4326885
38
src/Core.js
38
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];
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user