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

Fix background color rendering layering with no documentElement color

Browse Source
This commit is contained in:
Niklas von Hertzen 2013-09-04 20:03:16 +03:00
parent c232da2595
commit e9c3d9d332
4 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Core.js
View File

@ -404,3 +404,7 @@ _html2canvas.Util.Children = function( elem ) {
} }
return children; return children;
}; };
_html2canvas.Util.isTransparent = function(backgroundColor) {
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
};

34
src/Parse.js
View File

@ -1022,17 +1022,16 @@ _html2canvas.Parse = function (images, options) {
return bounds; return bounds;
} }
function renderElement(element, parentStack, pseudoElement) { function renderElement(element, parentStack, pseudoElement, ignoreBackground) {
var transform = getTransform(element, parentStack), var transform = getTransform(element, parentStack),
bounds = getBounds(element, transform), bounds = getBounds(element, transform),
image, image,
bgcolor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"),
stack = createStack(element, parentStack, bounds, transform), stack = createStack(element, parentStack, bounds, transform),
borders = stack.borders, borders = stack.borders,
ctx = stack.ctx, ctx = stack.ctx,
backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip), 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); createShape(ctx, borderData.clip);
@ -1040,9 +1039,11 @@ _html2canvas.Parse = function (images, options) {
ctx.save(); ctx.save();
ctx.clip(); ctx.clip();
if (backgroundBounds.height > 0 && backgroundBounds.width > 0){ if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) {
renderBackgroundColor(ctx, bounds, bgcolor); renderBackgroundColor(ctx, bounds, backgroundColor);
renderBackgroundImage(element, backgroundBounds, ctx); renderBackgroundImage(element, backgroundBounds, ctx);
} else if (ignoreBackground) {
stack.backgroundColor = backgroundColor;
} }
ctx.restore(); ctx.restore();
@ -1097,7 +1098,7 @@ _html2canvas.Parse = function (images, options) {
function parseElement (element, stack, pseudoElement) { function parseElement (element, stack, pseudoElement) {
if (isElementVisible(element)) { if (isElementVisible(element)) {
stack = renderElement(element, stack, pseudoElement) || stack; stack = renderElement(element, stack, pseudoElement, false) || stack;
if (!ignoreElementsRegExp.test(element.nodeName)) { if (!ignoreElementsRegExp.test(element.nodeName)) {
parseChildren(element, stack, pseudoElement); parseChildren(element, stack, pseudoElement);
} }
@ -1106,20 +1107,29 @@ _html2canvas.Parse = function (images, options) {
function parseChildren(element, stack, pseudoElement) { function parseChildren(element, stack, pseudoElement) {
Util.Children(element).forEach(function(node) { Util.Children(element).forEach(function(node) {
if (node.nodeType === 1) { if (node.nodeType === node.ELEMENT_NODE) {
parseElement(node, stack, pseudoElement); parseElement(node, stack, pseudoElement);
} else if (node.nodeType === 3) { } else if (node.nodeType === node.TEXT_NODE) {
renderText(element, node, stack); renderText(element, node, stack);
} }
}); });
} }
function init() { 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); parseChildren(element, stack);
stack.backgroundColor = getCSS(document.documentElement, "backgroundColor");
if (transparentBackground) {
background = stack.backgroundColor;
}
body.removeChild(hidePseudoElements); body.removeChild(hidePseudoElements);
return stack; return {
backgroundColor: background,
stack: stack
};
} }
return init(); return init();

2
src/Renderer.js
View File

@ -97,5 +97,5 @@ _html2canvas.Renderer = function(parseQueue, options){
return renderer; return renderer;
} }
return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue), _html2canvas); return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas);
}; };

11
src/renderers/Canvas.js
View File

@ -31,10 +31,6 @@ _html2canvas.Renderer.Canvas = function(options) {
return true; return true;
} }
function isTransparent(backgroundColor) {
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
}
function renderItem(ctx, item) { function renderItem(ctx, item) {
switch(item.type){ switch(item.type){
case "variable": 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"), var ctx = canvas.getContext("2d"),
newCanvas, newCanvas,
bounds, bounds,
fstyle; fstyle,
zStack = parsedData.stack;
canvas.width = canvas.style.width = options.width || zStack.ctx.width; canvas.width = canvas.style.width = options.width || zStack.ctx.width;
canvas.height = canvas.style.height = options.height || zStack.ctx.height; canvas.height = canvas.style.height = options.height || zStack.ctx.height;
fstyle = ctx.fillStyle; fstyle = ctx.fillStyle;
ctx.fillStyle = (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.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = fstyle; ctx.fillStyle = fstyle;