mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Implement background-size cover/contain

Browse Source
This commit is contained in:
MoyuScript 2013-11-12 19:35:28 +02:00
parent 0b8f67115e
commit 49a554b334
3 changed files with 117 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
build/html2canvas.js
View File

@ -235,9 +235,8 @@ function parseBackgroundSizePosition(value, element, attribute, index) {
value = (value || '').split(','); value = (value || '').split(',');
value = value[index || 0] || value[0] || 'auto'; value = value[index || 0] || value[0] || 'auto';
value = _html2canvas.Util.trimText(value).split(' '); value = _html2canvas.Util.trimText(value).split(' ');
if(attribute === 'backgroundSize' && (value[0] && value[0].match(/^(cover|contain|auto)$/))) {
if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) { return value;
//these values will be handled in the parent function
} else { } else {
value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0]; value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
if(value[1] === undefined) { 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 ) { _html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) {
var bgposition = _html2canvas.Util.getCSS( el, prop, imageIndex ) , var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex),
topPos, leftPosition,
left, topPosition;
percentage, if (backgroundPosition.length === 1){
val; backgroundPosition = [backgroundPosition[0], backgroundPosition[0]];
if (bgposition.length === 1){
val = bgposition[0];
bgposition = [];
bgposition[0] = val;
bgposition[1] = val;
} }
if (bgposition[0].toString().indexOf("%") !== -1){ if (backgroundPosition[0].toString().indexOf("%") !== -1){
percentage = (parseFloat(bgposition[0])/100); leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100);
left = bounds.width * percentage;
if(prop !== 'backgroundSize') {
left -= (backgroundSize || image).width*percentage;
}
} else { } else {
if(prop === 'backgroundSize') { leftPosition = parseInt(backgroundPosition[0], 10);
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);
}
} }
if (backgroundPosition[1] === 'auto') {
if(bgposition[1] === 'auto') { topPosition = leftPosition / image.width * image.height;
topPos = left / image.width * image.height; } else if (backgroundPosition[1].toString().indexOf("%") !== -1){
} else if (bgposition[1].toString().indexOf("%") !== -1){ topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100;
percentage = (parseFloat(bgposition[1])/100);
topPos = bounds.height * percentage;
if(prop !== 'backgroundSize') {
topPos -= (backgroundSize || image).height * percentage;
}
} else { } 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 ) { return {left: leftPosition, top: topPosition};
var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
return { left: result[0], top: result[1] };
}; };
_html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) { _html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) {
var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex ); var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex),
return { width: result[0], height: result[1] }; 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) { _html2canvas.Util.Extend = function (options, defaults) {
@ -415,7 +414,7 @@ _html2canvas.Util.Children = function( elem ) {
}; };
_html2canvas.Util.isTransparent = function(backgroundColor) { _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 () { _html2canvas.Util.Font = (function () {
@ -2945,7 +2944,7 @@ _html2canvas.Renderer.Canvas = function(options) {
canvas.height = canvas.style.height = options.height || zStack.ctx.height; canvas.height = canvas.style.height = options.height || zStack.ctx.height;
fstyle = ctx.fillStyle; 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.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = fstyle; ctx.fillStyle = fstyle;

4
build/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

115
src/Core.js
View File

@ -226,9 +226,8 @@ function parseBackgroundSizePosition(value, element, attribute, index) {
value = (value || '').split(','); value = (value || '').split(',');
value = value[index || 0] || value[0] || 'auto'; value = value[index || 0] || value[0] || 'auto';
value = _html2canvas.Util.trimText(value).split(' '); value = _html2canvas.Util.trimText(value).split(' ');
if(attribute === 'backgroundSize' && (value[0] && value[0].match(/^(cover|contain|auto)$/))) {
if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) { return value;
//these values will be handled in the parent function
} else { } else {
value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0]; value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
if(value[1] === undefined) { 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 ) { _html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) {
var bgposition = _html2canvas.Util.getCSS( el, prop, imageIndex ) , var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex),
topPos, leftPosition,
left, topPosition;
percentage, if (backgroundPosition.length === 1){
val; backgroundPosition = [backgroundPosition[0], backgroundPosition[0]];
if (bgposition.length === 1){
val = bgposition[0];
bgposition = [];
bgposition[0] = val;
bgposition[1] = val;
} }
if (bgposition[0].toString().indexOf("%") !== -1){ if (backgroundPosition[0].toString().indexOf("%") !== -1){
percentage = (parseFloat(bgposition[0])/100); leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100);
left = bounds.width * percentage;
if(prop !== 'backgroundSize') {
left -= (backgroundSize || image).width*percentage;
}
} else { } else {
if(prop === 'backgroundSize') { leftPosition = parseInt(backgroundPosition[0], 10);
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);
}
} }
if (backgroundPosition[1] === 'auto') {
if(bgposition[1] === 'auto') { topPosition = leftPosition / image.width * image.height;
topPos = left / image.width * image.height; } else if (backgroundPosition[1].toString().indexOf("%") !== -1){
} else if (bgposition[1].toString().indexOf("%") !== -1){ topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100;
percentage = (parseFloat(bgposition[1])/100);
topPos = bounds.height * percentage;
if(prop !== 'backgroundSize') {
topPos -= (backgroundSize || image).height * percentage;
}
} else { } 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 ) { return {left: leftPosition, top: topPosition};
var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
return { left: result[0], top: result[1] };
}; };
_html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) { _html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) {
var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex ); var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex),
return { width: result[0], height: result[1] }; 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) { _html2canvas.Util.Extend = function (options, defaults) {
@ -406,5 +405,5 @@ _html2canvas.Util.Children = function( elem ) {
}; };
_html2canvas.Util.isTransparent = function(backgroundColor) { _html2canvas.Util.isTransparent = function(backgroundColor) {
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)"); return (!backgroundColor || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
}; };