diff --git a/src/Core.js b/src/Core.js index 791d5ce..5ec0ef0 100644 --- a/src/Core.js +++ b/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 { diff --git a/src/Core.js.orig b/src/Core.js.orig deleted file mode 100644 index 798e97b..0000000 --- a/src/Core.js.orig +++ /dev/null @@ -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 -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; -}; diff --git a/src/Parse.js b/src/Parse.js index eb95574..66b056f 100644 --- a/src/Parse.js +++ b/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; diff --git a/src/Parse.js.orig b/src/Parse.js.orig deleted file mode 100644 index 442c777..0000000 --- a/src/Parse.js.orig +++ /dev/null @@ -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 :" + 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,">"); - } 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 += ""; - } - } - - } - - } - - parseDOM(body); - img.src = [ - "data:image/svg+xml,", - "", - "", - "", - html.replace(/\#/g,"%23"), - "", - "", - "" - ].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: [] - }; -} \ No newline at end of file diff --git a/src/Util.js.orig b/src/Util.js.orig deleted file mode 100644 index b0d9fa1..0000000 --- a/src/Util.js.orig +++ /dev/null @@ -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 -}; \ No newline at end of file