diff --git a/src/Core.js b/src/Core.js index ed2257f..fc8e6e8 100644 --- a/src/Core.js +++ b/src/Core.js @@ -404,3 +404,7 @@ _html2canvas.Util.Children = function( elem ) { } return children; }; + +_html2canvas.Util.isTransparent = function(backgroundColor) { + return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)"); +}; \ No newline at end of file diff --git a/src/Parse.js b/src/Parse.js index f444255..d155789 100644 --- a/src/Parse.js +++ b/src/Parse.js @@ -1022,17 +1022,16 @@ _html2canvas.Parse = function (images, options) { return bounds; } - function renderElement(element, parentStack, pseudoElement) { + function renderElement(element, parentStack, pseudoElement, ignoreBackground) { var transform = getTransform(element, parentStack), bounds = getBounds(element, transform), image, - bgcolor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"), stack = createStack(element, parentStack, bounds, transform), borders = stack.borders, ctx = stack.ctx, backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip), - borderData = parseBorders(element, bounds, borders); - + borderData = parseBorders(element, bounds, borders), + backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"); createShape(ctx, borderData.clip); @@ -1040,9 +1039,11 @@ _html2canvas.Parse = function (images, options) { ctx.save(); ctx.clip(); - if (backgroundBounds.height > 0 && backgroundBounds.width > 0){ - renderBackgroundColor(ctx, bounds, bgcolor); + if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) { + renderBackgroundColor(ctx, bounds, backgroundColor); renderBackgroundImage(element, backgroundBounds, ctx); + } else if (ignoreBackground) { + stack.backgroundColor = backgroundColor; } ctx.restore(); @@ -1097,7 +1098,7 @@ _html2canvas.Parse = function (images, options) { function parseElement (element, stack, pseudoElement) { if (isElementVisible(element)) { - stack = renderElement(element, stack, pseudoElement) || stack; + stack = renderElement(element, stack, pseudoElement, false) || stack; if (!ignoreElementsRegExp.test(element.nodeName)) { parseChildren(element, stack, pseudoElement); } @@ -1106,20 +1107,29 @@ _html2canvas.Parse = function (images, options) { function parseChildren(element, stack, pseudoElement) { Util.Children(element).forEach(function(node) { - if (node.nodeType === 1) { + if (node.nodeType === node.ELEMENT_NODE) { parseElement(node, stack, pseudoElement); - } else if (node.nodeType === 3) { + } else if (node.nodeType === node.TEXT_NODE) { renderText(element, node, stack); } }); } function init() { - var stack = renderElement(element, null); + var background = getCSS(document.documentElement, "backgroundColor"), + transparentBackground = (Util.isTransparent(background) && element === document.body), + stack = renderElement(element, null, false, transparentBackground); parseChildren(element, stack); - stack.backgroundColor = getCSS(document.documentElement, "backgroundColor"); + + if (transparentBackground) { + background = stack.backgroundColor; + } + body.removeChild(hidePseudoElements); - return stack; + return { + backgroundColor: background, + stack: stack + }; } return init(); diff --git a/src/Renderer.js b/src/Renderer.js index 91a2eab..99afa23 100644 --- a/src/Renderer.js +++ b/src/Renderer.js @@ -97,5 +97,5 @@ _html2canvas.Renderer = function(parseQueue, options){ return renderer; } - return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue), _html2canvas); + return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas); }; diff --git a/src/renderers/Canvas.js b/src/renderers/Canvas.js index 739561b..ebebeba 100644 --- a/src/renderers/Canvas.js +++ b/src/renderers/Canvas.js @@ -31,10 +31,6 @@ _html2canvas.Renderer.Canvas = function(options) { return true; } - function isTransparent(backgroundColor) { - return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)"); - } - function renderItem(ctx, item) { switch(item.type){ case "variable": @@ -69,17 +65,18 @@ _html2canvas.Renderer.Canvas = function(options) { } } - return function(zStack, options, document, queue, _html2canvas) { + return function(parsedData, options, document, queue, _html2canvas) { var ctx = canvas.getContext("2d"), newCanvas, bounds, - fstyle; + fstyle, + zStack = parsedData.stack; canvas.width = canvas.style.width = options.width || zStack.ctx.width; canvas.height = canvas.style.height = options.height || zStack.ctx.height; fstyle = ctx.fillStyle; - ctx.fillStyle = (isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : zStack.backgroundColor; + ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = fstyle;