mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
working background-size
This commit is contained in:
Andy Edinborough
parent
3d3f923ed8
commit
9ce03d6e86
31
src/Core.js
31
src/Core.js
|
|
@ -14,23 +14,6 @@ function h2clog(a) {
|
|||
|
||||
_html2canvas.Util = {};
|
||||
|
||||
_html2canvas.Util.backgroundImage = function (src) {
|
||||
|
||||
if (/data:image\/.*;base64,/i.test( src ) || /^(-webkit|-moz|linear-gradient|-o-)/.test( src )) {
|
||||
return src;
|
||||
}
|
||||
|
||||
if (src.toLowerCase().substr( 0, 5 ) === 'url("') {
|
||||
src = src.substr( 5 );
|
||||
src = src.substr( 0, src.length - 2 );
|
||||
} else {
|
||||
src = src.substr( 4 );
|
||||
src = src.substr( 0, src.length - 1 );
|
||||
}
|
||||
|
||||
return src;
|
||||
};
|
||||
|
||||
_html2canvas.Util.parseBackgroundImage = function (value) {
|
||||
var whitespace = ' \r\n\t',
|
||||
method, definition, prefix, prefix_i, block, results = [],
|
||||
|
|
@ -305,12 +288,14 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex ) {
|
|||
if(bgposition[0] === 'auto') { left = image.width; }
|
||||
if(bgposition[1] === 'auto') { topPos = image.height; }
|
||||
|
||||
if(bgposition[0].match(/contain|cover/)) {
|
||||
var resized = resize( image.width, image.height, bounds.width, bounds.height, bgposition[0] );
|
||||
left = resized.width;
|
||||
topPos = resized.height;
|
||||
} else {
|
||||
bgposition[0] = parseInt (bgposition[0], 10 );
|
||||
if(left === undefined) {
|
||||
if(bgposition[0].match(/contain|cover/)) {
|
||||
var resized = resize( image.width, image.height, bounds.width, bounds.height, bgposition[0] );
|
||||
left = resized.width;
|
||||
topPos = resized.height;
|
||||
} else {
|
||||
left = parseInt (bgposition[0], 10 );
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
|
|
|||
451
src/Core.js.orig
451
src/Core.js.orig
|
|
@ -1,451 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
var _html2canvas = {},
|
||||
previousElement,
|
||||
computedCSS,
|
||||
html2canvas;
|
||||
|
||||
|
||||
function h2clog(a) {
|
||||
if (_html2canvas.logging && window.console && window.console.log) {
|
||||
window.console.log(a);
|
||||
}
|
||||
}
|
||||
|
||||
_html2canvas.Util = {};
|
||||
|
||||
_html2canvas.Util.backgroundImage = function (src) {
|
||||
|
||||
if (/data:image\/.*;base64,/i.test( src ) || /^(-webkit|-moz|linear-gradient|-o-)/.test( src )) {
|
||||
return src;
|
||||
}
|
||||
|
||||
if (src.toLowerCase().substr( 0, 5 ) === 'url("') {
|
||||
src = src.substr( 5 );
|
||||
src = src.substr( 0, src.length - 2 );
|
||||
} else {
|
||||
src = src.substr( 4 );
|
||||
src = src.substr( 0, src.length - 1 );
|
||||
}
|
||||
|
||||
return src;
|
||||
};
|
||||
|
||||
_html2canvas.Util.parseBackgroundImage = function (value) {
|
||||
var whitespace = ' \r\n\t',
|
||||
method, definition, prefix, prefix_i, block, results = [],
|
||||
c, mode = 0, numParen = 0, quote, args;
|
||||
|
||||
var appendResult = function(){
|
||||
if(method) {
|
||||
if(definition.substr( 0, 1 ) === '"') {
|
||||
definition = definition.substr( 1, definition.length - 2 );
|
||||
}
|
||||
if(definition) {
|
||||
args.push(definition);
|
||||
}
|
||||
if(method.substr( 0, 1 ) === '-' &&
|
||||
(prefix_i = method.indexOf( '-', 1 ) + 1) > 0) {
|
||||
prefix = method.substr( 0, prefix_i);
|
||||
method = method.substr( prefix_i );
|
||||
}
|
||||
results.push({
|
||||
prefix: prefix,
|
||||
method: method.toLowerCase(),
|
||||
value: block,
|
||||
args: args
|
||||
});
|
||||
}
|
||||
args = []; //for some odd reason, setting .length = 0 didn't work in safari
|
||||
method =
|
||||
prefix =
|
||||
definition =
|
||||
block = '';
|
||||
};
|
||||
|
||||
appendResult();
|
||||
for(var i = 0, ii = value.length; i<ii; i++) {
|
||||
c = value[i];
|
||||
if(mode === 0 && whitespace.indexOf( c ) > -1){
|
||||
continue;
|
||||
}
|
||||
switch(c) {
|
||||
case '"':
|
||||
if(!quote) {
|
||||
quote = c;
|
||||
}
|
||||
else if(quote === c) {
|
||||
quote = null;
|
||||
}
|
||||
break;
|
||||
|
||||
case '(':
|
||||
if(quote) { break; }
|
||||
else if(mode === 0) {
|
||||
mode = 1;
|
||||
block += c;
|
||||
continue;
|
||||
} else {
|
||||
numParen++;
|
||||
}
|
||||
break;
|
||||
|
||||
case ')':
|
||||
if(quote) { break; }
|
||||
else if(mode === 1) {
|
||||
if(numParen === 0) {
|
||||
mode = 0;
|
||||
block += c;
|
||||
appendResult();
|
||||
continue;
|
||||
} else {
|
||||
numParen--;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case ',':
|
||||
if(quote) { break; }
|
||||
else if(mode === 0) {
|
||||
appendResult();
|
||||
continue;
|
||||
}
|
||||
else if (mode === 1) {
|
||||
if(numParen === 0 && !method.match(/^url$/i)) {
|
||||
args.push(definition);
|
||||
definition = '';
|
||||
block += c;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
block += c;
|
||||
if(mode === 0) { method += c; }
|
||||
else { definition += c; }
|
||||
}
|
||||
appendResult();
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
_html2canvas.Util.Bounds = function getBounds (el) {
|
||||
var clientRect,
|
||||
bounds = {};
|
||||
|
||||
if (el.getBoundingClientRect){
|
||||
clientRect = el.getBoundingClientRect();
|
||||
|
||||
|
||||
// TODO add scroll position to bounds, so no scrolling of window necessary
|
||||
bounds.top = clientRect.top;
|
||||
bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
|
||||
bounds.left = clientRect.left;
|
||||
|
||||
// older IE doesn't have width/height, but top/bottom instead
|
||||
bounds.width = clientRect.width || (clientRect.right - clientRect.left);
|
||||
bounds.height = clientRect.height || (clientRect.bottom - clientRect.top);
|
||||
|
||||
return bounds;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
_html2canvas.Util.getCSS = function (el, attribute) {
|
||||
<<<<<<< HEAD
|
||||
// return $(el).css(attribute);
|
||||
|
||||
var val,
|
||||
isBackgroundSizePosition = !!attribute.match( /^background(Size|Position)$/ );
|
||||
=======
|
||||
// return $(el).css(attribute);
|
||||
>>>>>>> niklasvh/develop
|
||||
|
||||
var val;
|
||||
|
||||
function toPX( attribute, val ) {
|
||||
var rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],
|
||||
left,
|
||||
style = el.style;
|
||||
|
||||
// Check if we are not dealing with pixels, (Opera has issues with this)
|
||||
// Ported from jQuery css.js
|
||||
// From the awesome hack by Dean Edwards
|
||||
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
|
||||
|
||||
// If we're not dealing with a regular pixel number
|
||||
// but a number that has a weird ending, we need to convert it to pixels
|
||||
|
||||
if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) {
|
||||
|
||||
// Remember the original values
|
||||
left = style.left;
|
||||
|
||||
// Put in the new values to get a computed value out
|
||||
if ( rsLeft ) {
|
||||
el.runtimeStyle.left = el.currentStyle.left;
|
||||
}
|
||||
style.left = attribute === "fontSize" ? "1em" : (val || 0);
|
||||
val = style.pixelLeft + "px";
|
||||
|
||||
// Revert the changed values
|
||||
style.left = left;
|
||||
if ( rsLeft ) {
|
||||
el.runtimeStyle.left = rsLeft;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
|
||||
|
||||
if ( window.getComputedStyle ) {
|
||||
if ( previousElement !== el ) {
|
||||
computedCSS = document.defaultView.getComputedStyle(el, null);
|
||||
}
|
||||
val = computedCSS[ attribute ];
|
||||
|
||||
if ( isBackgroundSizePosition ) {
|
||||
|
||||
val = (val.split(",")[0] || "0 0").split(" ");
|
||||
|
||||
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
|
||||
val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ];
|
||||
} else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) {
|
||||
var arr = val.split(" ");
|
||||
if ( arr.length <= 1 ) {
|
||||
arr[ 1 ] = arr[ 0 ];
|
||||
}
|
||||
arr[ 0 ] = parseInt( arr[ 0 ], 10 );
|
||||
arr[ 1 ] = parseInt( arr[ 1 ], 10 );
|
||||
val = arr;
|
||||
}
|
||||
|
||||
} else if ( el.currentStyle ) {
|
||||
// IE 9>
|
||||
if ( isBackgroundSizePosition ) {
|
||||
// Older IE uses -x and -y
|
||||
val = [ toPX( attribute + "X", el.currentStyle[ attribute + "X" ] ), toPX( attribute + "Y", el.currentStyle[ attribute + "Y" ] ) ];
|
||||
} else {
|
||||
|
||||
val = toPX( attribute, el.currentStyle[ attribute ] );
|
||||
|
||||
if (/^(border)/i.test( attribute ) && /^(medium|thin|thick)$/i.test( val )) {
|
||||
switch (val) {
|
||||
case "thin":
|
||||
val = "1px";
|
||||
break;
|
||||
case "medium":
|
||||
val = "0px"; // this is wrong, it should be 3px but IE uses medium for no border as well.. TODO find a work around
|
||||
break;
|
||||
case "thick":
|
||||
val = "5px";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
=======
|
||||
if (!/^(thin|medium|thick)$/i.test( val )) {
|
||||
return Math.round(parseFloat( val )) + "px";
|
||||
>>>>>>> niklasvh/develop
|
||||
}
|
||||
|
||||
return val;
|
||||
|
||||
}
|
||||
|
||||
|
||||
<<<<<<< HEAD
|
||||
//return $(el).css(attribute);
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
function backgroundBoundsFactory( prop, el, bounds, image ) {
|
||||
// TODO add support for multi image backgrounds
|
||||
|
||||
var bgposition = _html2canvas.Util.getCSS( el, prop ) ,
|
||||
topPos,
|
||||
left,
|
||||
percentage,
|
||||
val;
|
||||
|
||||
if (bgposition.length === 1){
|
||||
val = bgposition;
|
||||
|
||||
bgposition = [];
|
||||
|
||||
bgposition[0] = val;
|
||||
bgposition[1] = val;
|
||||
=======
|
||||
if ( window.getComputedStyle ) {
|
||||
if ( previousElement !== el ) {
|
||||
computedCSS = document.defaultView.getComputedStyle(el, null);
|
||||
>>>>>>> niklasvh/develop
|
||||
}
|
||||
val = computedCSS[ attribute ];
|
||||
|
||||
if ( attribute === "backgroundPosition" ) {
|
||||
|
||||
val = (val.split(",")[0] || "0 0").split(" ");
|
||||
|
||||
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
|
||||
val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ];
|
||||
} else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) {
|
||||
var arr = val.split(" ");
|
||||
if ( arr.length <= 1 ) {
|
||||
arr[ 1 ] = arr[ 0 ];
|
||||
}
|
||||
arr[ 0 ] = parseInt( arr[ 0 ], 10 );
|
||||
arr[ 1 ] = parseInt( arr[ 1 ], 10 );
|
||||
val = arr;
|
||||
}
|
||||
|
||||
} else if ( el.currentStyle ) {
|
||||
// IE 9>
|
||||
if (attribute === "backgroundPosition") {
|
||||
// Older IE uses -x and -y
|
||||
val = [ toPX( attribute + "X", el.currentStyle[ attribute + "X" ] ), toPX( attribute + "Y", el.currentStyle[ attribute + "Y" ] ) ];
|
||||
} else {
|
||||
|
||||
val = toPX( attribute, el.currentStyle[ attribute ] );
|
||||
|
||||
if (/^(border)/i.test( attribute ) && /^(medium|thin|thick)$/i.test( val )) {
|
||||
switch (val) {
|
||||
case "thin":
|
||||
val = "1px";
|
||||
break;
|
||||
case "medium":
|
||||
val = "0px"; // this is wrong, it should be 3px but IE uses medium for no border as well.. TODO find a work around
|
||||
break;
|
||||
case "thick":
|
||||
val = "5px";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
return [left, topPos];
|
||||
}
|
||||
=======
|
||||
return val;
|
||||
};
|
||||
>>>>>>> niklasvh/develop
|
||||
|
||||
_html2canvas.Util.BackgroundPosition = function( el, bounds, image ) {
|
||||
var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image );
|
||||
return { left: result[0], top: result[1] };
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
_html2canvas.Util.BackgroundSize = function( el, bounds, image ) {
|
||||
var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image );
|
||||
return { width: result[1], height: result[0] };
|
||||
=======
|
||||
_html2canvas.Util.BackgroundPosition = function ( el, bounds, image ) {
|
||||
// TODO add support for multi image backgrounds
|
||||
|
||||
var bgposition = _html2canvas.Util.getCSS( el, "backgroundPosition" ) ,
|
||||
topPos,
|
||||
left,
|
||||
percentage,
|
||||
val;
|
||||
|
||||
if (bgposition.length === 1){
|
||||
val = bgposition;
|
||||
|
||||
bgposition = [];
|
||||
|
||||
bgposition[0] = val;
|
||||
bgposition[1] = val;
|
||||
}
|
||||
|
||||
if (bgposition[0].toString().indexOf("%") !== -1){
|
||||
percentage = (parseFloat(bgposition[0])/100);
|
||||
left = ((bounds.width * percentage)-(image.width*percentage));
|
||||
} else {
|
||||
left = parseInt(bgposition[0],10);
|
||||
}
|
||||
|
||||
if (bgposition[1].toString().indexOf("%") !== -1){
|
||||
percentage = (parseFloat(bgposition[1])/100);
|
||||
topPos = ((bounds.height * percentage)-(image.height*percentage));
|
||||
} else {
|
||||
topPos = parseInt(bgposition[1],10);
|
||||
}
|
||||
|
||||
return {
|
||||
top: topPos,
|
||||
left: left
|
||||
};
|
||||
>>>>>>> niklasvh/develop
|
||||
};
|
||||
|
||||
_html2canvas.Util.Extend = function (options, defaults) {
|
||||
for (var key in options) {
|
||||
if (options.hasOwnProperty(key)) {
|
||||
defaults[key] = options[key];
|
||||
}
|
||||
}
|
||||
return defaults;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Derived from jQuery.contents()
|
||||
* Copyright 2010, John Resig
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
_html2canvas.Util.Children = function( elem ) {
|
||||
|
||||
|
||||
var children;
|
||||
try {
|
||||
|
||||
children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ?
|
||||
elem.contentDocument || elem.contentWindow.document : (function( array ){
|
||||
var ret = [];
|
||||
|
||||
if ( array !== null ) {
|
||||
|
||||
(function( first, second ) {
|
||||
var i = first.length,
|
||||
j = 0;
|
||||
|
||||
if ( typeof second.length === "number" ) {
|
||||
for ( var l = second.length; j < l; j++ ) {
|
||||
first[ i++ ] = second[ j ];
|
||||
}
|
||||
|
||||
} else {
|
||||
while ( second[j] !== undefined ) {
|
||||
first[ i++ ] = second[ j++ ];
|
||||
}
|
||||
}
|
||||
|
||||
first.length = i;
|
||||
|
||||
return first;
|
||||
})( ret, array );
|
||||
|
||||
}
|
||||
|
||||
return ret;
|
||||
})( elem.childNodes );
|
||||
|
||||
} catch (ex) {
|
||||
h2clog("html2canvas.Util.Children failed with exception: " + ex.message);
|
||||
children = [];
|
||||
}
|
||||
return children;
|
||||
};
|
||||
15
src/Parse.js
15
src/Parse.js
|
|
@ -521,8 +521,8 @@ _html2canvas.Parse = function (images, options) {
|
|||
image,
|
||||
Math.floor(sourceX), // source X
|
||||
Math.floor(sourceY), // source Y
|
||||
Math.ceil(width-sourceX), // source Width
|
||||
Math.ceil(height-sourceY), // source Height
|
||||
Math.ceil(image.width-sourceX), // source Width
|
||||
Math.ceil(image.height-sourceY), // source Height
|
||||
Math.ceil(x+sourceX), // destination X
|
||||
Math.ceil(y+sourceY), // destination Y
|
||||
Math.ceil(width-sourceX), // destination width
|
||||
|
|
@ -559,8 +559,8 @@ _html2canvas.Parse = function (images, options) {
|
|||
}
|
||||
|
||||
function renderBackgroundNoRepeat(ctx, image, backgroundPosition, x, y, w, h) {
|
||||
var bgdw = w - backgroundPosition.left,
|
||||
bgdh = h - backgroundPosition.top,
|
||||
var bgdw = w, // - backgroundPosition.left,
|
||||
bgdh = h, // - backgroundPosition.top,
|
||||
bgsx = backgroundPosition.left,
|
||||
bgsy = backgroundPosition.top,
|
||||
bgdx = backgroundPosition.left + x,
|
||||
|
|
@ -590,8 +590,8 @@ _html2canvas.Parse = function (images, options) {
|
|||
image,
|
||||
bgsx,
|
||||
bgsy,
|
||||
bgdw,
|
||||
bgdh,
|
||||
image.width,
|
||||
image.height,
|
||||
bgdx,
|
||||
bgdy,
|
||||
bgdw,
|
||||
|
|
@ -658,13 +658,12 @@ _html2canvas.Parse = function (images, options) {
|
|||
break;
|
||||
|
||||
default:
|
||||
renderBackgroundRepeat(ctx, image, backgroundPosition, { width: backgroundSize.width, height: backgroundSize.height });
|
||||
renderBackgroundRepeat(ctx, image, backgroundPosition, { top: bounds.top, left: bounds.left, width: backgroundSize.width, height: backgroundSize.height });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function renderBackgroundImage(element, bounds, ctx) {
|
||||
// TODO add support for multi background-images
|
||||
var backgroundImage = getCSS(element, "backgroundImage"),
|
||||
backgroundImages = _html2canvas.Util.parseBackgroundImage(backgroundImage),
|
||||
image;
|
||||
|
|
|
|||
|
|
@ -1,947 +0,0 @@
|
|||
_html2canvas.Parse = function (images, options) {
|
||||
window.scroll(0,0);
|
||||
|
||||
var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
|
||||
numDraws = 0,
|
||||
doc = element.ownerDocument,
|
||||
support = _html2canvas.Util.Support(options, doc),
|
||||
ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
|
||||
body = doc.body,
|
||||
getCSS = _html2canvas.Util.getCSS;
|
||||
|
||||
images = images || {};
|
||||
|
||||
function documentWidth () {
|
||||
return Math.max(
|
||||
Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
|
||||
Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
|
||||
Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
|
||||
);
|
||||
}
|
||||
|
||||
function documentHeight () {
|
||||
return Math.max(
|
||||
Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
|
||||
Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
|
||||
Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
|
||||
);
|
||||
}
|
||||
|
||||
function getCSSInt(element, attribute) {
|
||||
var val = parseInt(getCSS(element, attribute), 10);
|
||||
return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html
|
||||
}
|
||||
|
||||
function renderRect (ctx, x, y, w, h, bgcolor) {
|
||||
if (bgcolor !== "transparent"){
|
||||
ctx.setVariable("fillStyle", bgcolor);
|
||||
ctx.fillRect(x, y, w, h);
|
||||
numDraws+=1;
|
||||
}
|
||||
}
|
||||
|
||||
function textTransform (text, transform) {
|
||||
switch(transform){
|
||||
case "lowercase":
|
||||
return text.toLowerCase();
|
||||
case "capitalize":
|
||||
return text.replace( /(^|\s|:|-|\(|\))([a-z])/g , function (m, p1, p2) {
|
||||
if (m.length > 0) {
|
||||
return p1 + p2.toUpperCase();
|
||||
}
|
||||
} );
|
||||
case "uppercase":
|
||||
return text.toUpperCase();
|
||||
default:
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
function noLetterSpacing(letter_spacing) {
|
||||
return (/^(normal|none|0px)$/.test(letter_spacing));
|
||||
}
|
||||
|
||||
function trimText (text) {
|
||||
return text.replace(/^\s*/g, "").replace(/\s*$/g, "");
|
||||
}
|
||||
|
||||
function drawText(currentText, x, y, ctx){
|
||||
if (currentText !== null && trimText(currentText).length > 0) {
|
||||
ctx.fillText(currentText, x, y);
|
||||
numDraws+=1;
|
||||
}
|
||||
}
|
||||
|
||||
function setTextVariables(ctx, el, text_decoration, color) {
|
||||
var align = false,
|
||||
bold = getCSS(el, "fontWeight"),
|
||||
family = getCSS(el, "fontFamily"),
|
||||
size = getCSS(el, "fontSize");
|
||||
|
||||
switch(parseInt(bold, 10)){
|
||||
case 401:
|
||||
bold = "bold";
|
||||
break;
|
||||
case 400:
|
||||
bold = "normal";
|
||||
break;
|
||||
}
|
||||
|
||||
ctx.setVariable("fillStyle", color);
|
||||
ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
|
||||
ctx.setVariable("textAlign", (align) ? "right" : "left");
|
||||
|
||||
if (text_decoration !== "none"){
|
||||
return _html2canvas.Util.Font(family, size, doc);
|
||||
}
|
||||
}
|
||||
|
||||
function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) {
|
||||
switch(text_decoration) {
|
||||
case "underline":
|
||||
// Draws a line at the baseline of the font
|
||||
// TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
|
||||
renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color);
|
||||
break;
|
||||
case "overline":
|
||||
renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color);
|
||||
break;
|
||||
case "line-through":
|
||||
// TODO try and find exact position for line-through
|
||||
renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
function renderText(el, textNode, stack) {
|
||||
var ctx = stack.ctx,
|
||||
color = getCSS(el, "color"),
|
||||
text_decoration = getCSS(el, "textDecoration"),
|
||||
text_align = getCSS(el, "textAlign"),
|
||||
letter_spacing = getCSS(el, "letterSpacing"),
|
||||
bounds,
|
||||
text,
|
||||
metrics,
|
||||
renderList,
|
||||
listLen,
|
||||
newTextNode,
|
||||
textValue,
|
||||
textOffset = 0,
|
||||
oldTextNode,
|
||||
c,
|
||||
range,
|
||||
parent,
|
||||
wrapElement,
|
||||
backupText;
|
||||
|
||||
textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
|
||||
text = trimText(textNode.nodeValue);
|
||||
|
||||
if (text.length > 0){
|
||||
|
||||
text_align = text_align.replace(["-webkit-auto"],["auto"]);
|
||||
|
||||
renderList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(text_align) && noLetterSpacing(letter_spacing)) ?
|
||||
textNode.nodeValue.split(/(\b| )/) :
|
||||
textNode.nodeValue.split("");
|
||||
|
||||
metrics = setTextVariables(ctx, el, text_decoration, color);
|
||||
oldTextNode = textNode;
|
||||
|
||||
for ( c=0, listLen = renderList.length; c < listLen; c+=1 ) {
|
||||
textValue = null;
|
||||
|
||||
if (support.rangeBounds){
|
||||
// getBoundingClientRect is supported for ranges
|
||||
if (text_decoration !== "none" || trimText(renderList[c]).length !== 0) {
|
||||
textValue = renderList[c];
|
||||
if (doc.createRange){
|
||||
range = doc.createRange();
|
||||
|
||||
range.setStart(textNode, textOffset);
|
||||
range.setEnd(textNode, textOffset + textValue.length);
|
||||
} else {
|
||||
// TODO add IE support
|
||||
range = body.createTextRange();
|
||||
}
|
||||
|
||||
if (range.getBoundingClientRect()) {
|
||||
bounds = range.getBoundingClientRect();
|
||||
} else {
|
||||
bounds = {};
|
||||
}
|
||||
=======
|
||||
function getTextBounds(state, text, textDecoration, isLast) {
|
||||
var bounds;
|
||||
if (support.rangeBounds) {
|
||||
if (textDecoration !== "none" || trimText(text).length !== 0) {
|
||||
bounds = textRangeBounds(text, state.node, state.textOffset);
|
||||
}
|
||||
state.textOffset += text.length;
|
||||
} else if (state.node && typeof state.node.nodeValue === "string" ){
|
||||
var newTextNode = (isLast) ? state.node.splitText(text.length) : null;
|
||||
bounds = textWrapperBounds(state.node);
|
||||
state.node = newTextNode;
|
||||
}
|
||||
return bounds;
|
||||
}
|
||||
>>>>>>> niklasvh/develop
|
||||
|
||||
function textRangeBounds(text, textNode, textOffset) {
|
||||
var range = doc.createRange();
|
||||
range.setStart(textNode, textOffset);
|
||||
range.setEnd(textNode, textOffset + text.length);
|
||||
return range.getBoundingClientRect();
|
||||
}
|
||||
|
||||
function textWrapperBounds(oldTextNode) {
|
||||
var parent = oldTextNode.parentNode,
|
||||
wrapElement = doc.createElement('wrapper'),
|
||||
backupText = oldTextNode.cloneNode(true);
|
||||
|
||||
wrapElement.appendChild(oldTextNode.cloneNode(true));
|
||||
parent.replaceChild(wrapElement, oldTextNode);
|
||||
|
||||
var bounds = _html2canvas.Util.Bounds(wrapElement);
|
||||
parent.replaceChild(backupText, wrapElement);
|
||||
return bounds;
|
||||
}
|
||||
|
||||
function renderText(el, textNode, stack) {
|
||||
var ctx = stack.ctx,
|
||||
color = getCSS(el, "color"),
|
||||
textDecoration = getCSS(el, "textDecoration"),
|
||||
textAlign = getCSS(el, "textAlign"),
|
||||
metrics,
|
||||
textList,
|
||||
state = {
|
||||
node: textNode,
|
||||
textOffset: 0
|
||||
};
|
||||
|
||||
if (trimText(textNode.nodeValue).length > 0) {
|
||||
textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
|
||||
textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
|
||||
|
||||
textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?
|
||||
textNode.nodeValue.split(/(\b| )/)
|
||||
: textNode.nodeValue.split("");
|
||||
|
||||
metrics = setTextVariables(ctx, el, textDecoration, color);
|
||||
|
||||
textList.forEach(function(text, index) {
|
||||
var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1));
|
||||
if (bounds) {
|
||||
drawText(text, bounds.left, bounds.bottom, ctx);
|
||||
renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function listPosition (element, val) {
|
||||
var boundElement = doc.createElement( "boundelement" ),
|
||||
originalType,
|
||||
bounds;
|
||||
|
||||
boundElement.style.display = "inline";
|
||||
|
||||
originalType = element.style.listStyleType;
|
||||
element.style.listStyleType = "none";
|
||||
|
||||
boundElement.appendChild(doc.createTextNode(val));
|
||||
|
||||
element.insertBefore(boundElement, element.firstChild);
|
||||
|
||||
bounds = _html2canvas.Util.Bounds(boundElement);
|
||||
element.removeChild(boundElement);
|
||||
element.style.listStyleType = originalType;
|
||||
return bounds;
|
||||
}
|
||||
|
||||
function elementIndex( el ) {
|
||||
var i = -1,
|
||||
count = 1,
|
||||
childs = el.parentNode.childNodes;
|
||||
|
||||
if (el.parentNode) {
|
||||
while( childs[ ++i ] !== el ) {
|
||||
if ( childs[ i ].nodeType === 1 ) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
function listItemText(element, type) {
|
||||
var currentIndex = elementIndex(element),
|
||||
text;
|
||||
switch(type){
|
||||
case "decimal":
|
||||
text = currentIndex;
|
||||
break;
|
||||
case "decimal-leading-zero":
|
||||
text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString();
|
||||
break;
|
||||
case "upper-roman":
|
||||
text = _html2canvas.Generate.ListRoman( currentIndex );
|
||||
break;
|
||||
case "lower-roman":
|
||||
text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();
|
||||
break;
|
||||
case "lower-alpha":
|
||||
text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();
|
||||
break;
|
||||
case "upper-alpha":
|
||||
text = _html2canvas.Generate.ListAlpha( currentIndex );
|
||||
break;
|
||||
}
|
||||
|
||||
text += ". ";
|
||||
return text;
|
||||
}
|
||||
|
||||
function renderListItem(element, stack, elBounds) {
|
||||
var x,
|
||||
text,
|
||||
ctx = stack.ctx,
|
||||
type = getCSS(element, "listStyleType"),
|
||||
listBounds;
|
||||
|
||||
if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {
|
||||
text = listItemText(element, type);
|
||||
listBounds = listPosition(element, text);
|
||||
setTextVariables(ctx, element, "none", getCSS(element, "color"));
|
||||
|
||||
if (getCSS(element, "listStylePosition") === "inside") {
|
||||
ctx.setVariable("textAlign", "left");
|
||||
x = elBounds.left;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
drawText(text, x, listBounds.bottom, ctx);
|
||||
}
|
||||
}
|
||||
|
||||
function loadImage (src){
|
||||
var img = images[src];
|
||||
if (img && img.succeeded === true) {
|
||||
return img.img;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function clipBounds(src, dst){
|
||||
var x = Math.max(src.left, dst.left),
|
||||
y = Math.max(src.top, dst.top),
|
||||
x2 = Math.min((src.left + src.width), (dst.left + dst.width)),
|
||||
y2 = Math.min((src.top + src.height), (dst.top + dst.height));
|
||||
|
||||
return {
|
||||
left:x,
|
||||
top:y,
|
||||
width:x2-x,
|
||||
height:y2-y
|
||||
};
|
||||
}
|
||||
|
||||
function setZ(zIndex, parentZ){
|
||||
// TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them
|
||||
var newContext;
|
||||
if (!parentZ){
|
||||
newContext = h2czContext(0);
|
||||
return newContext;
|
||||
}
|
||||
|
||||
if (zIndex !== "auto"){
|
||||
newContext = h2czContext(zIndex);
|
||||
parentZ.children.push(newContext);
|
||||
return newContext;
|
||||
|
||||
}
|
||||
|
||||
return parentZ;
|
||||
}
|
||||
|
||||
function renderImage(ctx, element, image, bounds, borders) {
|
||||
|
||||
var paddingLeft = getCSSInt(element, 'paddingLeft'),
|
||||
paddingTop = getCSSInt(element, 'paddingTop'),
|
||||
paddingRight = getCSSInt(element, 'paddingRight'),
|
||||
paddingBottom = getCSSInt(element, 'paddingBottom');
|
||||
|
||||
drawImage(
|
||||
ctx,
|
||||
image,
|
||||
0, //sx
|
||||
0, //sy
|
||||
image.width, //sw
|
||||
image.height, //sh
|
||||
bounds.left + paddingLeft + borders[3].width, //dx
|
||||
bounds.top + paddingTop + borders[0].width, // dy
|
||||
bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw
|
||||
bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh
|
||||
);
|
||||
}
|
||||
|
||||
function renderBorders(el, ctx, bounds, clip){
|
||||
var x = bounds.left,
|
||||
y = bounds.top,
|
||||
w = bounds.width,
|
||||
h = bounds.height,
|
||||
borderSide,
|
||||
borderData,
|
||||
bx,
|
||||
by,
|
||||
bw,
|
||||
bh,
|
||||
i,
|
||||
borderArgs,
|
||||
borderBounds,
|
||||
borders = (function(el){
|
||||
var borders = [],
|
||||
sides = ["Top","Right","Bottom","Left"],
|
||||
s;
|
||||
|
||||
for (s = 0; s < 4; s+=1){
|
||||
borders.push({
|
||||
width: getCSSInt(el, 'border' + sides[s] + 'Width'),
|
||||
color: getCSS(el, 'border' + sides[s] + 'Color')
|
||||
});
|
||||
}
|
||||
|
||||
return borders;
|
||||
|
||||
}(el)),
|
||||
// http://www.w3.org/TR/css3-background/#the-border-radius
|
||||
borderRadius = (function( el ) {
|
||||
var borders = [],
|
||||
sides = ["TopLeft","TopRight","BottomRight","BottomLeft"],
|
||||
s;
|
||||
|
||||
for (s = 0; s < 4; s+=1){
|
||||
borders.push( getCSS(el, 'border' + sides[s] + 'Radius') );
|
||||
}
|
||||
|
||||
return borders;
|
||||
})( el );
|
||||
|
||||
|
||||
|
||||
for ( borderSide = 0; borderSide < 4; borderSide+=1 ) {
|
||||
borderData = borders[ borderSide ];
|
||||
borderArgs = [];
|
||||
if (borderData.width>0){
|
||||
bx = x;
|
||||
by = y;
|
||||
bw = w;
|
||||
bh = h - (borders[2].width);
|
||||
|
||||
switch(borderSide){
|
||||
case 0:
|
||||
// top border
|
||||
bh = borders[0].width;
|
||||
|
||||
i = 0;
|
||||
borderArgs[ i++ ] = [ "line", bx, by ]; // top left
|
||||
borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right
|
||||
borderArgs[ i++ ] = [ "line", bx + bw - borders[ 1 ].width, by + bh ]; // bottom right
|
||||
borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by + bh ]; // bottom left
|
||||
|
||||
break;
|
||||
case 1:
|
||||
// right border
|
||||
bx = x + w - (borders[1].width);
|
||||
bw = borders[1].width;
|
||||
|
||||
i = 0;
|
||||
borderArgs[ i++ ] = [ "line", bx, by + borders[ 0 ].width]; // top left
|
||||
borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right
|
||||
borderArgs[ i++ ] = [ "line", bx + bw, by + bh + borders[ 2 ].width ]; // bottom right
|
||||
borderArgs[ i++ ] = [ "line", bx, by + bh ]; // bottom left
|
||||
|
||||
break;
|
||||
case 2:
|
||||
// bottom border
|
||||
by = (by + h) - (borders[2].width);
|
||||
bh = borders[2].width;
|
||||
|
||||
i = 0;
|
||||
borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by ]; // top left
|
||||
borderArgs[ i++ ] = [ "line", bx + bw - borders[ 2 ].width, by ]; // top right
|
||||
borderArgs[ i++ ] = [ "line", bx + bw, by + bh ]; // bottom right
|
||||
borderArgs[ i++ ] = [ "line", bx, by + bh ]; // bottom left
|
||||
|
||||
break;
|
||||
case 3:
|
||||
// left border
|
||||
bw = borders[3].width;
|
||||
|
||||
i = 0;
|
||||
borderArgs[ i++ ] = [ "line", bx, by ]; // top left
|
||||
borderArgs[ i++ ] = [ "line", bx + bw, by + borders[ 0 ].width ]; // top right
|
||||
borderArgs[ i++ ] = [ "line", bx + bw, by + bh ]; // bottom right
|
||||
borderArgs[ i++ ] = [ "line", bx, by + bh + borders[ 2 ].width ]; // bottom left
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
borderBounds = {
|
||||
left:bx,
|
||||
top:by,
|
||||
width: bw,
|
||||
height:bh
|
||||
};
|
||||
|
||||
if (clip){
|
||||
borderBounds = clipBounds(borderBounds, clip);
|
||||
}
|
||||
|
||||
|
||||
if ( borderBounds.width > 0 && borderBounds.height > 0 ) {
|
||||
|
||||
if ( borderData.color !== "transparent" ){
|
||||
ctx.setVariable( "fillStyle", borderData.color );
|
||||
|
||||
var shape = ctx.drawShape(),
|
||||
numBorderArgs = borderArgs.length;
|
||||
|
||||
for ( i = 0; i < numBorderArgs; i++ ) {
|
||||
shape[( i === 0) ? "moveTo" : borderArgs[ i ][ 0 ] + "To" ].apply( null, borderArgs[ i ].slice(1) );
|
||||
}
|
||||
|
||||
numDraws+=1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return borders;
|
||||
}
|
||||
|
||||
|
||||
function renderFormValue (el, bounds, stack){
|
||||
|
||||
var valueWrap = doc.createElement('valuewrap'),
|
||||
cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],
|
||||
textValue,
|
||||
textNode;
|
||||
|
||||
cssPropertyArray.forEach(function(property) {
|
||||
try {
|
||||
valueWrap.style[property] = getCSS(el, property);
|
||||
} catch(e) {
|
||||
// Older IE has issues with "border"
|
||||
h2clog("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
valueWrap.style.borderColor = "black";
|
||||
valueWrap.style.borderStyle = "solid";
|
||||
valueWrap.style.display = "block";
|
||||
valueWrap.style.position = "absolute";
|
||||
|
||||
if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){
|
||||
valueWrap.style.lineHeight = getCSS(el, "height");
|
||||
}
|
||||
|
||||
valueWrap.style.top = bounds.top + "px";
|
||||
valueWrap.style.left = bounds.left + "px";
|
||||
|
||||
textValue = (el.nodeName === "SELECT") ? el.options[el.selectedIndex].text : el.value;
|
||||
textNode = doc.createTextNode(textValue);
|
||||
|
||||
valueWrap.appendChild(textNode);
|
||||
body.appendChild(valueWrap);
|
||||
|
||||
renderText(el, textNode, stack);
|
||||
body.removeChild(valueWrap);
|
||||
}
|
||||
|
||||
function drawImage (ctx) {
|
||||
ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1));
|
||||
numDraws+=1;
|
||||
}
|
||||
|
||||
function renderBackgroundSlice (ctx, image, x, y, width, height, elx, ely){
|
||||
var sourceX = (elx - x > 0) ? elx-x :0,
|
||||
sourceY= (ely - y > 0) ? ely-y : 0;
|
||||
|
||||
drawImage(
|
||||
ctx,
|
||||
image,
|
||||
Math.floor(sourceX), // source X
|
||||
Math.floor(sourceY), // source Y
|
||||
Math.ceil(width-sourceX), // source Width
|
||||
Math.ceil(height-sourceY), // source Height
|
||||
Math.ceil(x+sourceX), // destination X
|
||||
Math.ceil(y+sourceY), // destination Y
|
||||
Math.ceil(width-sourceX), // destination width
|
||||
Math.ceil(height-sourceY) // destination height
|
||||
);
|
||||
}
|
||||
|
||||
function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) {
|
||||
var bgy,
|
||||
height,
|
||||
add,
|
||||
h;
|
||||
|
||||
backgroundPosition.top -= Math.ceil(backgroundPosition.top / image.height) * image.height;
|
||||
|
||||
for(bgy = (bounds.top + backgroundPosition.top); bgy < (bounds.height + bounds.top); bgy = Math.floor(bgy+image.height) - add) {
|
||||
h = Math.min(image.height,(bounds.height + bounds.top) - bgy);
|
||||
|
||||
height = (Math.floor(bgy + image.height) > h + bgy) ? (h + bgy) - bgy : image.height;
|
||||
|
||||
if (bgy < bounds.top){
|
||||
add = bounds.top - bgy;
|
||||
bgy = bounds.top;
|
||||
} else {
|
||||
add = 0;
|
||||
}
|
||||
|
||||
renderBackgroundRepeatX(ctx, image, backgroundPosition, bounds.left, bgy, bounds.width, height);
|
||||
|
||||
if (add > 0){
|
||||
backgroundPosition.top += add;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderBackgroundNoRepeat(ctx, image, backgroundPosition, x, y, w, h) {
|
||||
var bgdw = w - backgroundPosition.left,
|
||||
bgdh = h - backgroundPosition.top,
|
||||
bgsx = backgroundPosition.left,
|
||||
bgsy = backgroundPosition.top,
|
||||
bgdx = backgroundPosition.left + x,
|
||||
bgdy = backgroundPosition.top + y;
|
||||
|
||||
if (bgsx<0){
|
||||
bgsx = Math.abs(bgsx);
|
||||
bgdx += bgsx;
|
||||
bgdw = Math.min(w,image.width-bgsx);
|
||||
} else {
|
||||
bgdw = Math.min(bgdw,image.width);
|
||||
bgsx = 0;
|
||||
}
|
||||
|
||||
if (bgsy < 0){
|
||||
bgsy = Math.abs(bgsy);
|
||||
bgdy += bgsy;
|
||||
bgdh = Math.min(h, image.height - bgsy);
|
||||
} else {
|
||||
bgdh = Math.min(bgdh, image.height);
|
||||
bgsy = 0;
|
||||
}
|
||||
|
||||
if (bgdh > 0 && bgdw > 0){
|
||||
drawImage(
|
||||
ctx,
|
||||
image,
|
||||
bgsx,
|
||||
bgsy,
|
||||
bgdw,
|
||||
bgdh,
|
||||
bgdx,
|
||||
bgdy,
|
||||
bgdw,
|
||||
bgdh
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function renderBackgroundRepeatY (ctx, image, backgroundPosition, x, y, w, h){
|
||||
var height,
|
||||
width = Math.min(image.width, w),
|
||||
bgy;
|
||||
|
||||
backgroundPosition.top -= Math.ceil(backgroundPosition.top / image.height) * image.height;
|
||||
|
||||
for (bgy = y + backgroundPosition.top; bgy < h + y; bgy = Math.round(bgy + image.height)){
|
||||
height = (Math.floor(bgy + image.height) > h + y) ? (h+y) - bgy : image.height;
|
||||
renderBackgroundSlice(ctx, image, x + backgroundPosition.left, bgy,width, height, x, y);
|
||||
}
|
||||
}
|
||||
|
||||
function renderBackgroundRepeatX(ctx, image, backgroundPosition, x, y, w, h){
|
||||
var height = Math.min(image.height, h),
|
||||
width,
|
||||
bgx;
|
||||
|
||||
backgroundPosition.left -= Math.ceil(backgroundPosition.left / image.width) * image.width;
|
||||
|
||||
for (bgx = x + backgroundPosition.left; bgx < w + x; bgx = Math.round(bgx + image.width)) {
|
||||
width = (Math.floor(bgx + image.width) > w + x) ? (w + x) - bgx : image.width;
|
||||
renderBackgroundSlice(ctx, image, bgx,(y + backgroundPosition.top), width, height, x, y);
|
||||
}
|
||||
}
|
||||
|
||||
function renderBackgroundColor(ctx, backgroundBounds, bgcolor) {
|
||||
renderRect(
|
||||
ctx,
|
||||
backgroundBounds.left,
|
||||
backgroundBounds.top,
|
||||
backgroundBounds.width,
|
||||
backgroundBounds.height,
|
||||
bgcolor
|
||||
);
|
||||
}
|
||||
|
||||
function renderBackgroundRepeating(el, bounds, ctx, image) {
|
||||
var backgroundPosition = _html2canvas.Util.BackgroundPosition(el, bounds, image),
|
||||
backgroundRepeat = getCSS(el, "backgroundRepeat").split(",")[0];
|
||||
switch (backgroundRepeat) {
|
||||
case "repeat-x":
|
||||
renderBackgroundRepeatX(ctx, image, backgroundPosition, bounds.left, bounds.top, bounds.width, bounds.height);
|
||||
break;
|
||||
|
||||
case "repeat-y":
|
||||
renderBackgroundRepeatY(ctx, image, backgroundPosition, bounds.left, bounds.top, bounds.width, bounds.height);
|
||||
break;
|
||||
|
||||
case "no-repeat":
|
||||
renderBackgroundNoRepeat(ctx, image, backgroundPosition, bounds.left, bounds.top, bounds.width, bounds.height);
|
||||
break;
|
||||
|
||||
default:
|
||||
renderBackgroundRepeat(ctx, image, backgroundPosition, bounds);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function renderBackgroundImage(element, bounds, ctx) {
|
||||
// TODO add support for multi background-images
|
||||
var backgroundImage = getCSS(element, "backgroundImage"),
|
||||
image;
|
||||
|
||||
if (!/data:image\/.*;base64,/i.test(backgroundImage) && !/^(-webkit|-moz|linear-gradient|-o-)/.test(backgroundImage)) {
|
||||
backgroundImage = backgroundImage.split(",")[0];
|
||||
}
|
||||
|
||||
if (typeof backgroundImage !== "undefined" && /^(1|none)$/.test(backgroundImage) === false) {
|
||||
image = loadImage(_html2canvas.Util.backgroundImage(backgroundImage));
|
||||
|
||||
// TODO add support for background-origin
|
||||
if (image) {
|
||||
renderBackgroundRepeating(element, bounds, ctx, image);
|
||||
} else {
|
||||
h2clog("html2canvas: Error loading background:" + backgroundImage);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function setOpacity(ctx, element, parentStack) {
|
||||
var opacity = getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1);
|
||||
ctx.setVariable("globalAlpha", opacity);
|
||||
return opacity;
|
||||
}
|
||||
|
||||
function createStack(element, parentStack, bounds) {
|
||||
|
||||
var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),
|
||||
stack = {
|
||||
ctx: ctx,
|
||||
zIndex: setZ(getCSS(element, "zIndex"), (parentStack) ? parentStack.zIndex : null),
|
||||
opacity: setOpacity(ctx, element, parentStack),
|
||||
cssPosition: getCSS(element, "position"),
|
||||
borders: renderBorders(element, ctx, bounds, false),
|
||||
clip: (parentStack && parentStack.clip) ? _html2canvas.Util.Extend( {}, parentStack.clip ) : null
|
||||
};
|
||||
|
||||
// TODO correct overflow for absolute content residing under a static position
|
||||
if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){
|
||||
stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds;
|
||||
}
|
||||
|
||||
stack.zIndex.children.push(stack);
|
||||
|
||||
return stack;
|
||||
}
|
||||
|
||||
function getBackgroundBounds(borders, bounds, clip) {
|
||||
var backgroundBounds = {
|
||||
left: bounds.left + borders[3].width,
|
||||
top: bounds.top + borders[0].width,
|
||||
width: bounds.width - (borders[1].width + borders[3].width),
|
||||
height: bounds.height - (borders[0].width + borders[2].width)
|
||||
};
|
||||
|
||||
if (clip) {
|
||||
backgroundBounds = clipBounds(backgroundBounds, clip);
|
||||
}
|
||||
|
||||
return backgroundBounds;
|
||||
}
|
||||
|
||||
function renderElement(element, parentStack){
|
||||
var bounds = _html2canvas.Util.Bounds(element),
|
||||
image,
|
||||
bgcolor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"),
|
||||
stack = createStack(element, parentStack, bounds),
|
||||
borders = stack.borders,
|
||||
ctx = stack.ctx,
|
||||
backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip);
|
||||
|
||||
if (backgroundBounds.height > 0 && backgroundBounds.width > 0){
|
||||
renderBackgroundColor(ctx, backgroundBounds, bgcolor);
|
||||
renderBackgroundImage(element, backgroundBounds, ctx);
|
||||
}
|
||||
|
||||
switch(element.nodeName){
|
||||
case "IMG":
|
||||
if ((image = loadImage(element.getAttribute('src')))) {
|
||||
renderImage(ctx, element, image, bounds, borders);
|
||||
} else {
|
||||
h2clog("html2canvas: Error loading <img>:" + element.getAttribute('src'));
|
||||
}
|
||||
break;
|
||||
case "INPUT":
|
||||
// TODO add all relevant type's, i.e. HTML5 new stuff
|
||||
// todo add support for placeholder attribute for browsers which support it
|
||||
if (/^(text|url|email|submit|button|reset)$/.test(element.type) && element.value.length > 0){
|
||||
renderFormValue(element, bounds, stack);
|
||||
}
|
||||
break;
|
||||
case "TEXTAREA":
|
||||
if (element.value.length > 0){
|
||||
renderFormValue(element, bounds, stack);
|
||||
}
|
||||
break;
|
||||
case "SELECT":
|
||||
if (element.options.length > 0){
|
||||
renderFormValue(element, bounds, stack);
|
||||
}
|
||||
break;
|
||||
case "LI":
|
||||
renderListItem(element, stack, backgroundBounds);
|
||||
break;
|
||||
case "CANVAS":
|
||||
renderImage(ctx, element, element, bounds, borders);
|
||||
break;
|
||||
}
|
||||
|
||||
return stack;
|
||||
}
|
||||
|
||||
function isElementVisible(element) {
|
||||
return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
|
||||
}
|
||||
|
||||
function parseElement (el, stack) {
|
||||
|
||||
if (isElementVisible(el)) {
|
||||
stack = renderElement(el, stack) || stack;
|
||||
if (!ignoreElementsRegExp.test(el.nodeName)) {
|
||||
_html2canvas.Util.Children(el).forEach(function(node) {
|
||||
if (node.nodeType === 1) {
|
||||
parseElement(node, stack);
|
||||
} else if (node.nodeType === 3) {
|
||||
renderText(el, node, stack);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function svgDOMRender(body, stack) {
|
||||
var img = new Image(),
|
||||
docWidth = documentWidth(),
|
||||
docHeight = documentHeight(),
|
||||
html = "";
|
||||
|
||||
function parseDOM(el) {
|
||||
var children = _html2canvas.Util.Children( el ),
|
||||
len = children.length,
|
||||
attr,
|
||||
a,
|
||||
alen,
|
||||
elm,
|
||||
i;
|
||||
for ( i = 0; i < len; i+=1 ) {
|
||||
elm = children[ i ];
|
||||
if ( elm.nodeType === 3 ) {
|
||||
// Text node
|
||||
html += elm.nodeValue.replace(/</g,"<").replace(/>/g,">");
|
||||
} else if ( elm.nodeType === 1 ) {
|
||||
// Element
|
||||
if ( !/^(script|meta|title)$/.test(elm.nodeName.toLowerCase()) ) {
|
||||
|
||||
html += "<" + elm.nodeName.toLowerCase();
|
||||
|
||||
// add attributes
|
||||
if ( elm.hasAttributes() ) {
|
||||
attr = elm.attributes;
|
||||
alen = attr.length;
|
||||
for ( a = 0; a < alen; a+=1 ) {
|
||||
html += " " + attr[ a ].name + '="' + attr[ a ].value + '"';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html += '>';
|
||||
|
||||
parseDOM( elm );
|
||||
|
||||
|
||||
html += "</" + elm.nodeName.toLowerCase() + ">";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
parseDOM(body);
|
||||
img.src = [
|
||||
"data:image/svg+xml,",
|
||||
"<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='" + docWidth + "' height='" + docHeight + "'>",
|
||||
"<foreignObject width='" + docWidth + "' height='" + docHeight + "'>",
|
||||
"<html xmlns='http://www.w3.org/1999/xhtml' style='margin:0;'>",
|
||||
html.replace(/\#/g,"%23"),
|
||||
"</html>",
|
||||
"</foreignObject>",
|
||||
"</svg>"
|
||||
].join("");
|
||||
|
||||
img.onload = function() {
|
||||
stack.svgRender = img;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
function init() {
|
||||
var stack = renderElement(element, null);
|
||||
|
||||
if (support.svgRendering) {
|
||||
svgDOMRender(document.documentElement, stack);
|
||||
}
|
||||
|
||||
Array.prototype.slice.call(element.children, 0).forEach(function(childElement) {
|
||||
parseElement(childElement, stack);
|
||||
});
|
||||
|
||||
stack.backgroundColor = getCSS(document.documentElement, "backgroundColor");
|
||||
|
||||
return stack;
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
function h2czContext(zindex) {
|
||||
return {
|
||||
zindex: zindex,
|
||||
children: []
|
||||
};
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<<<<<<< HEAD
|
||||
html2canvas = window.html2canvas = function( elements, opts ) {
|
||||
|
||||
=======
|
||||
window.html2canvas = function(elements, opts) {
|
||||
>>>>>>> niklasvh/develop
|
||||
var queue,
|
||||
canvas,
|
||||
options = {
|
||||
// general
|
||||
logging: false,
|
||||
elements: elements,
|
||||
|
||||
// preload options
|
||||
proxy: "",
|
||||
timeout: 0, // no timeout
|
||||
useCORS: false, // try to load images as CORS (where available), before falling back to proxy
|
||||
allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true
|
||||
|
||||
// parse options
|
||||
svgRendering: false, // use svg powered rendering where available (FF11+)
|
||||
ignoreElements: "IFRAME|OBJECT|PARAM",
|
||||
useOverflow: true,
|
||||
letterRendering: false,
|
||||
|
||||
// render options
|
||||
|
||||
flashcanvas: undefined, // path to flashcanvas
|
||||
width: null,
|
||||
height: null,
|
||||
taintTest: true, // do a taint test with all images before applying to canvas
|
||||
renderer: "Canvas"
|
||||
};
|
||||
|
||||
options = _html2canvas.Util.Extend(opts, options);
|
||||
|
||||
_html2canvas.logging = options.logging;
|
||||
options.complete = function( images ) {
|
||||
|
||||
if (typeof options.onpreloaded === "function") {
|
||||
if ( options.onpreloaded( images ) === false ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
queue = _html2canvas.Parse( images, options );
|
||||
|
||||
if (typeof options.onparsed === "function") {
|
||||
if ( options.onparsed( queue ) === false ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
canvas = _html2canvas.Renderer( queue, options );
|
||||
|
||||
if (typeof options.onrendered === "function") {
|
||||
options.onrendered( canvas );
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
// for pages without images, we still want this to be async, i.e. return methods before executing
|
||||
window.setTimeout( function(){
|
||||
_html2canvas.Preload( options );
|
||||
}, 0 );
|
||||
|
||||
return {
|
||||
render: function( queue, opts ) {
|
||||
return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );
|
||||
},
|
||||
parse: function( images, opts ) {
|
||||
return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );
|
||||
},
|
||||
preload: function( opts ) {
|
||||
return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
|
||||
},
|
||||
log: h2clog
|
||||
};
|
||||
};
|
||||
|
||||
window.html2canvas.log = h2clog; // for renderers
|
||||
window.html2canvas.Renderer = {
|
||||
Canvas: undefined // We are assuming this will be used
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user