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;
};
_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;
}
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();

2
src/Renderer.js
View File

@ -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);
};

11
src/renderers/Canvas.js
View File

@ -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;