Correctly apply canvas background color

This commit is contained in:
Niklas von Hertzen 2014-09-21 11:24:20 +03:00
parent 7ee2f411b0
commit 24d9a22556
5 changed files with 17 additions and 11 deletions

11
dist/html2canvas.js vendored
View File

@ -1402,15 +1402,14 @@ function asFloat(str) {
function getBounds(node) {
if (node.getBoundingClientRect) {
var clientRect = node.getBoundingClientRect();
var isBody = node.nodeName === "BODY";
var width = isBody ? node.scrollWidth : (node.offsetWidth == null ? clientRect.width : node.offsetWidth);
var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
return {
top: clientRect.top,
bottom: clientRect.bottom || (clientRect.top + clientRect.height),
right: clientRect.left + width,
left: clientRect.left,
width: width,
height: isBody ? node.scrollHeight : (node.offsetHeight == null ? clientRect.height : node.offsetHeight)
height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
};
}
return {};
@ -1438,8 +1437,10 @@ function NodeParser(element, renderer, support, imageLoader, options) {
this.renderQueue = [];
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
var parent = new NodeContainer(element, null);
if (element !== element.ownerDocument.documentElement && this.renderer.isTransparent(parent.css('backgroundColor'))) {
renderer.rectangle(0, 0, renderer.width, renderer.height, new NodeContainer(element.ownerDocument.documentElement, null).css('backgroundColor'));
if (element === element.ownerDocument.documentElement) {
// http://www.w3.org/TR/css3-background/#special-backgrounds
var canvasBackground = new NodeContainer(this.renderer.isTransparent(parent.css('backgroundColor')) ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.css('backgroundColor'));
}
parent.visibile = parent.isElementVisible();
this.createPseudoHideStyles(element.ownerDocument);

File diff suppressed because one or more lines are too long

View File

@ -338,15 +338,14 @@ function asFloat(str) {
function getBounds(node) {
if (node.getBoundingClientRect) {
var clientRect = node.getBoundingClientRect();
var isBody = node.nodeName === "BODY";
var width = isBody ? node.scrollWidth : (node.offsetWidth == null ? clientRect.width : node.offsetWidth);
var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
return {
top: clientRect.top,
bottom: clientRect.bottom || (clientRect.top + clientRect.height),
right: clientRect.left + width,
left: clientRect.left,
width: width,
height: isBody ? node.scrollHeight : (node.offsetHeight == null ? clientRect.height : node.offsetHeight)
height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
};
}
return {};

View File

@ -7,8 +7,10 @@ function NodeParser(element, renderer, support, imageLoader, options) {
this.renderQueue = [];
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
var parent = new NodeContainer(element, null);
if (element !== element.ownerDocument.documentElement && this.renderer.isTransparent(parent.css('backgroundColor'))) {
renderer.rectangle(0, 0, renderer.width, renderer.height, new NodeContainer(element.ownerDocument.documentElement, null).css('backgroundColor'));
if (element === element.ownerDocument.documentElement) {
// http://www.w3.org/TR/css3-background/#special-backgrounds
var canvasBackground = new NodeContainer(this.renderer.isTransparent(parent.css('backgroundColor')) ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.css('backgroundColor'));
}
parent.visibile = parent.isElementVisible();
this.createPseudoHideStyles(element.ownerDocument);

View File

@ -55,8 +55,12 @@ var h2cSelector, h2cOptions;
$canvas.siblings().toggle();
$(window).click(function(){
$canvas.toggle().siblings().toggle();
$(document.documentElement).css('background', $canvas.is(':visible') ? "none" : "");
$(document.body).css('background', $canvas.is(':visible') ? "none" : "");
throwMessage("Canvas Render " + ($canvas.is(':visible') ? "visible" : "hidden"));
});
$(document.documentElement).css('background', $canvas.is(':visible') ? "none" : "");
$(document.body).css('background', $canvas.is(':visible') ? "none" : "");
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)) + " ms<br />",4000);
} else {
$canvas.css('display', 'none');