Skip to content

Commit 24d9a22

Browse files
niklasvhniklasvh
committed
Correctly apply canvas background color
1 parent 7ee2f41 commit 24d9a22

5 files changed

Lines changed: 17 additions & 11 deletions

File tree

‎dist/html2canvas.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1402,15 +1402,14 @@ function asFloat(str) {
14021402
function getBounds(node) {
14031403
if (node.getBoundingClientRect) {
14041404
var clientRect = node.getBoundingClientRect();
1405-
var isBody = node.nodeName === "BODY";
1406-
var width = isBody ? node.scrollWidth : (node.offsetWidth == null ? clientRect.width : node.offsetWidth);
1405+
var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
14071406
return {
14081407
top: clientRect.top,
14091408
bottom: clientRect.bottom || (clientRect.top + clientRect.height),
14101409
right: clientRect.left + width,
14111410
left: clientRect.left,
14121411
width: width,
1413-
height: isBody ? node.scrollHeight : (node.offsetHeight == null ? clientRect.height : node.offsetHeight)
1412+
height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
14141413
};
14151414
}
14161415
return {};
@@ -1438,8 +1437,10 @@ function NodeParser(element, renderer, support, imageLoader, options) {
14381437
this.renderQueue = [];
14391438
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
14401439
var parent = new NodeContainer(element, null);
1441-
if (element !== element.ownerDocument.documentElement && this.renderer.isTransparent(parent.css('backgroundColor'))) {
1442-
renderer.rectangle(0, 0, renderer.width, renderer.height, new NodeContainer(element.ownerDocument.documentElement, null).css('backgroundColor'));
1440+
if (element === element.ownerDocument.documentElement) {
1441+
// http://www.w3.org/TR/css3-background/#special-backgrounds
1442+
var canvasBackground = new NodeContainer(this.renderer.isTransparent(parent.css('backgroundColor')) ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
1443+
renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.css('backgroundColor'));
14431444
}
14441445
parent.visibile = parent.isElementVisible();
14451446
this.createPseudoHideStyles(element.ownerDocument);

‎dist/html2canvas.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/nodecontainer.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -338,15 +338,14 @@ function asFloat(str) {
338338
function getBounds(node) {
339339
if (node.getBoundingClientRect) {
340340
var clientRect = node.getBoundingClientRect();
341-
var isBody = node.nodeName === "BODY";
342-
var width = isBody ? node.scrollWidth : (node.offsetWidth == null ? clientRect.width : node.offsetWidth);
341+
var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
343342
return {
344343
top: clientRect.top,
345344
bottom: clientRect.bottom || (clientRect.top + clientRect.height),
346345
right: clientRect.left + width,
347346
left: clientRect.left,
348347
width: width,
349-
height: isBody ? node.scrollHeight : (node.offsetHeight == null ? clientRect.height : node.offsetHeight)
348+
height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
350349
};
351350
}
352351
return {};

‎src/nodeparser.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ function NodeParser(element, renderer, support, imageLoader, options) {
77
this.renderQueue = [];
88
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
99
var parent = new NodeContainer(element, null);
10-
if (element !== element.ownerDocument.documentElement && this.renderer.isTransparent(parent.css('backgroundColor'))) {
11-
renderer.rectangle(0, 0, renderer.width, renderer.height, new NodeContainer(element.ownerDocument.documentElement, null).css('backgroundColor'));
10+
if (element === element.ownerDocument.documentElement) {
11+
// http://www.w3.org/TR/css3-background/#special-backgrounds
12+
var canvasBackground = new NodeContainer(this.renderer.isTransparent(parent.css('backgroundColor')) ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
13+
renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.css('backgroundColor'));
1214
}
1315
parent.visibile = parent.isElementVisible();
1416
this.createPseudoHideStyles(element.ownerDocument);

‎tests/test.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,12 @@ var h2cSelector, h2cOptions;
5555
$canvas.siblings().toggle();
5656
$(window).click(function(){
5757
$canvas.toggle().siblings().toggle();
58+
$(document.documentElement).css('background', $canvas.is(':visible') ? "none" : "");
59+
$(document.body).css('background', $canvas.is(':visible') ? "none" : "");
5860
throwMessage("Canvas Render " + ($canvas.is(':visible') ? "visible" : "hidden"));
5961
});
62+
$(document.documentElement).css('background', $canvas.is(':visible') ? "none" : "");
63+
$(document.body).css('background', $canvas.is(':visible') ? "none" : "");
6064
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)) + " ms<br />",4000);
6165
} else {
6266
$canvas.css('display', 'none');

0 commit comments

Comments
 (0)