mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Implement background-size cover/contain
This commit is contained in:
Niklas von Hertzen
parent
57d20a9794
commit
e9afe03960
@ -235,9 +235,8 @@ function parseBackgroundSizePosition(value, element, attribute, index) {
|
||||
value = (value || '').split(',');
|
||||
value = value[index || 0] || value[0] || 'auto';
|
||||
value = _html2canvas.Util.trimText(value).split(' ');
|
||||
|
||||
if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) {
|
||||
//these values will be handled in the parent function
|
||||
if(attribute === 'backgroundSize' && (value[0] && value[0].match(/^(cover|contain|auto)$/))) {
|
||||
return value;
|
||||
} else {
|
||||
value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
|
||||
if(value[1] === undefined) {
|
||||
@ -296,71 +295,71 @@ _html2canvas.Util.resizeBounds = function( current_width, current_height, target
|
||||
};
|
||||
};
|
||||
|
||||
function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {
|
||||
var bgposition = _html2canvas.Util.getCSS( el, prop, imageIndex ) ,
|
||||
topPos,
|
||||
left,
|
||||
percentage,
|
||||
val;
|
||||
|
||||
if (bgposition.length === 1){
|
||||
val = bgposition[0];
|
||||
|
||||
bgposition = [];
|
||||
|
||||
bgposition[0] = val;
|
||||
bgposition[1] = val;
|
||||
_html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) {
|
||||
var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex),
|
||||
leftPosition,
|
||||
topPosition;
|
||||
if (backgroundPosition.length === 1){
|
||||
backgroundPosition = [backgroundPosition[0], backgroundPosition[0]];
|
||||
}
|
||||
|
||||
if (bgposition[0].toString().indexOf("%") !== -1){
|
||||
percentage = (parseFloat(bgposition[0])/100);
|
||||
left = bounds.width * percentage;
|
||||
if(prop !== 'backgroundSize') {
|
||||
left -= (backgroundSize || image).width*percentage;
|
||||
}
|
||||
if (backgroundPosition[0].toString().indexOf("%") !== -1){
|
||||
leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100);
|
||||
} else {
|
||||
if(prop === 'backgroundSize') {
|
||||
if(bgposition[0] === 'auto') {
|
||||
left = image.width;
|
||||
} else {
|
||||
if (/contain|cover/.test(bgposition[0])) {
|
||||
var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]);
|
||||
left = resized.width;
|
||||
topPos = resized.height;
|
||||
} else {
|
||||
left = parseInt(bgposition[0], 10);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
left = parseInt( bgposition[0], 10);
|
||||
}
|
||||
leftPosition = parseInt(backgroundPosition[0], 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;
|
||||
}
|
||||
|
||||
if (backgroundPosition[1] === 'auto') {
|
||||
topPosition = leftPosition / image.width * image.height;
|
||||
} else if (backgroundPosition[1].toString().indexOf("%") !== -1){
|
||||
topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100;
|
||||
} else {
|
||||
topPos = parseInt(bgposition[1],10);
|
||||
topPosition = parseInt(backgroundPosition[1], 10);
|
||||
}
|
||||
|
||||
return [left, topPos];
|
||||
}
|
||||
if (backgroundPosition[0] === 'auto') {
|
||||
leftPosition = topPosition / image.height * image.width;
|
||||
}
|
||||
|
||||
_html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {
|
||||
var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
|
||||
return { left: result[0], top: result[1] };
|
||||
return {left: leftPosition, top: topPosition};
|
||||
};
|
||||
|
||||
_html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {
|
||||
var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex );
|
||||
return { width: result[0], height: result[1] };
|
||||
_html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) {
|
||||
var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex),
|
||||
width,
|
||||
height;
|
||||
|
||||
if (backgroundSize.length === 1){
|
||||
backgroundSize = [backgroundSize[0], backgroundSize[0]];
|
||||
}
|
||||
|
||||
if (backgroundSize[0].toString().indexOf("%") !== -1){
|
||||
width = bounds.width * parseFloat(backgroundSize[0]) / 100;
|
||||
} else if(backgroundSize[0] === 'auto') {
|
||||
width = image.width;
|
||||
} else {
|
||||
if (/contain|cover/.test(backgroundSize[0])) {
|
||||
var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, backgroundSize[0]);
|
||||
return {width: resized.width, height: resized.height};
|
||||
} else {
|
||||
width = parseInt(backgroundSize[0], 10);
|
||||
}
|
||||
}
|
||||
|
||||
if(backgroundSize[1] === 'auto') {
|
||||
height = width / image.width * image.height;
|
||||
} else if (backgroundSize[1].toString().indexOf("%") !== -1){
|
||||
height = bounds.height * parseFloat(backgroundSize[1]) / 100;
|
||||
} else {
|
||||
height = parseInt(backgroundSize[1],10);
|
||||
}
|
||||
|
||||
|
||||
if (backgroundSize[0] === 'auto') {
|
||||
width = height / image.height * image.width;
|
||||
}
|
||||
|
||||
return {width: width, height: height};
|
||||
};
|
||||
|
||||
_html2canvas.Util.Extend = function (options, defaults) {
|
||||
@ -415,7 +414,7 @@ _html2canvas.Util.Children = function( elem ) {
|
||||
};
|
||||
|
||||
_html2canvas.Util.isTransparent = function(backgroundColor) {
|
||||
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
|
||||
return (!backgroundColor || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
|
||||
};
|
||||
_html2canvas.Util.Font = (function () {
|
||||
|
||||
@ -2945,7 +2944,7 @@ _html2canvas.Renderer.Canvas = function(options) {
|
||||
canvas.height = canvas.style.height = options.height || zStack.ctx.height;
|
||||
|
||||
fstyle = ctx.fillStyle;
|
||||
ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
|
||||
ctx.fillStyle = (Util.isTransparent(parsedData.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = fstyle;
|
||||
|
||||
|
||||
4
build/html2canvas.min.js
vendored
4
build/html2canvas.min.js
vendored
File diff suppressed because one or more lines are too long
115
src/Core.js
115
src/Core.js
@ -226,9 +226,8 @@ function parseBackgroundSizePosition(value, element, attribute, index) {
|
||||
value = (value || '').split(',');
|
||||
value = value[index || 0] || value[0] || 'auto';
|
||||
value = _html2canvas.Util.trimText(value).split(' ');
|
||||
|
||||
if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) {
|
||||
//these values will be handled in the parent function
|
||||
if(attribute === 'backgroundSize' && (value[0] && value[0].match(/^(cover|contain|auto)$/))) {
|
||||
return value;
|
||||
} else {
|
||||
value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
|
||||
if(value[1] === undefined) {
|
||||
@ -287,71 +286,71 @@ _html2canvas.Util.resizeBounds = function( current_width, current_height, target
|
||||
};
|
||||
};
|
||||
|
||||
function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {
|
||||
var bgposition = _html2canvas.Util.getCSS( el, prop, imageIndex ) ,
|
||||
topPos,
|
||||
left,
|
||||
percentage,
|
||||
val;
|
||||
|
||||
if (bgposition.length === 1){
|
||||
val = bgposition[0];
|
||||
|
||||
bgposition = [];
|
||||
|
||||
bgposition[0] = val;
|
||||
bgposition[1] = val;
|
||||
_html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) {
|
||||
var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex),
|
||||
leftPosition,
|
||||
topPosition;
|
||||
if (backgroundPosition.length === 1){
|
||||
backgroundPosition = [backgroundPosition[0], backgroundPosition[0]];
|
||||
}
|
||||
|
||||
if (bgposition[0].toString().indexOf("%") !== -1){
|
||||
percentage = (parseFloat(bgposition[0])/100);
|
||||
left = bounds.width * percentage;
|
||||
if(prop !== 'backgroundSize') {
|
||||
left -= (backgroundSize || image).width*percentage;
|
||||
}
|
||||
if (backgroundPosition[0].toString().indexOf("%") !== -1){
|
||||
leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100);
|
||||
} else {
|
||||
if(prop === 'backgroundSize') {
|
||||
if(bgposition[0] === 'auto') {
|
||||
left = image.width;
|
||||
} else {
|
||||
if (/contain|cover/.test(bgposition[0])) {
|
||||
var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]);
|
||||
left = resized.width;
|
||||
topPos = resized.height;
|
||||
} else {
|
||||
left = parseInt(bgposition[0], 10);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
left = parseInt( bgposition[0], 10);
|
||||
}
|
||||
leftPosition = parseInt(backgroundPosition[0], 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;
|
||||
}
|
||||
|
||||
if (backgroundPosition[1] === 'auto') {
|
||||
topPosition = leftPosition / image.width * image.height;
|
||||
} else if (backgroundPosition[1].toString().indexOf("%") !== -1){
|
||||
topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100;
|
||||
} else {
|
||||
topPos = parseInt(bgposition[1],10);
|
||||
topPosition = parseInt(backgroundPosition[1], 10);
|
||||
}
|
||||
|
||||
return [left, topPos];
|
||||
}
|
||||
if (backgroundPosition[0] === 'auto') {
|
||||
leftPosition = topPosition / image.height * image.width;
|
||||
}
|
||||
|
||||
_html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {
|
||||
var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
|
||||
return { left: result[0], top: result[1] };
|
||||
return {left: leftPosition, top: topPosition};
|
||||
};
|
||||
|
||||
_html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {
|
||||
var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex );
|
||||
return { width: result[0], height: result[1] };
|
||||
_html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) {
|
||||
var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex),
|
||||
width,
|
||||
height;
|
||||
|
||||
if (backgroundSize.length === 1){
|
||||
backgroundSize = [backgroundSize[0], backgroundSize[0]];
|
||||
}
|
||||
|
||||
if (backgroundSize[0].toString().indexOf("%") !== -1){
|
||||
width = bounds.width * parseFloat(backgroundSize[0]) / 100;
|
||||
} else if(backgroundSize[0] === 'auto') {
|
||||
width = image.width;
|
||||
} else {
|
||||
if (/contain|cover/.test(backgroundSize[0])) {
|
||||
var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, backgroundSize[0]);
|
||||
return {width: resized.width, height: resized.height};
|
||||
} else {
|
||||
width = parseInt(backgroundSize[0], 10);
|
||||
}
|
||||
}
|
||||
|
||||
if(backgroundSize[1] === 'auto') {
|
||||
height = width / image.width * image.height;
|
||||
} else if (backgroundSize[1].toString().indexOf("%") !== -1){
|
||||
height = bounds.height * parseFloat(backgroundSize[1]) / 100;
|
||||
} else {
|
||||
height = parseInt(backgroundSize[1],10);
|
||||
}
|
||||
|
||||
|
||||
if (backgroundSize[0] === 'auto') {
|
||||
width = height / image.height * image.width;
|
||||
}
|
||||
|
||||
return {width: width, height: height};
|
||||
};
|
||||
|
||||
_html2canvas.Util.Extend = function (options, defaults) {
|
||||
@ -406,5 +405,5 @@ _html2canvas.Util.Children = function( elem ) {
|
||||
};
|
||||
|
||||
_html2canvas.Util.isTransparent = function(backgroundColor) {
|
||||
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
|
||||
return (!backgroundColor || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user