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

Correctly apply canvas background color

Browse Source
This commit is contained in:
MoyuScript 2014-09-21 11:24:20 +03:00
parent 72994252aa
commit f875ee6c9b
5 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dist/html2canvas.js vendored
View File

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

2
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
src/nodecontainer.js
View File

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

6
src/nodeparser.js
View File

@ -7,8 +7,10 @@ function NodeParser(element, renderer, support, imageLoader, options) {
this.renderQueue = []; this.renderQueue = [];
this.stack = new StackingContext(true, 1, element.ownerDocument, null); this.stack = new StackingContext(true, 1, element.ownerDocument, null);
var parent = new NodeContainer(element, null); var parent = new NodeContainer(element, null);
if (element !== element.ownerDocument.documentElement && this.renderer.isTransparent(parent.css('backgroundColor'))) { if (element === element.ownerDocument.documentElement) {
renderer.rectangle(0, 0, renderer.width, renderer.height, new NodeContainer(element.ownerDocument.documentElement, null).css('backgroundColor')); // 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(); parent.visibile = parent.isElementVisible();
this.createPseudoHideStyles(element.ownerDocument); this.createPseudoHideStyles(element.ownerDocument);

4
tests/test.js
View File

@ -55,8 +55,12 @@ var h2cSelector, h2cOptions;
$canvas.siblings().toggle(); $canvas.siblings().toggle();
$(window).click(function(){ $(window).click(function(){
$canvas.toggle().siblings().toggle(); $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")); 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); throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)) + " ms<br />",4000);
} else { } else {
$canvas.css('display', 'none'); $canvas.css('display', 'none');