Skip to content

Commit ba9a33b

Browse files
committed
Add work around for chrome related background-image issues in iframe
1 parent f474542 commit ba9a33b

1 file changed

Lines changed: 43 additions & 15 deletions

File tree

src/core.js

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
window.html2canvas = function(nodeList, options) {
2-
var container = createWindowClone(document, window.innerWidth, window.innerHeight);
3-
var clonedWindow = container.contentWindow;
4-
var element = (nodeList === undefined) ? document.body : nodeList[0];
5-
var node = clonedWindow.document.documentElement;
6-
var support = new Support();
7-
var imageLoader = new ImageLoader(options, support);
82
options = options || {};
93
if (options.logging) {
104
window.html2canvas.logging = true;
115
window.html2canvas.start = Date.now();
126
}
7+
createWindowClone(document, window.innerWidth, window.innerHeight).then(function(container) {
8+
log("Document cloned");
9+
var clonedWindow = container.contentWindow;
10+
var element = (nodeList === undefined) ? document.body : nodeList[0];
11+
var node = clonedWindow.document.documentElement;
12+
var support = new Support();
13+
var imageLoader = new ImageLoader(options, support);
1314

14-
var renderer = new CanvasRenderer(documentWidth(), documentHeight(), imageLoader);
15-
var parser = new NodeParser(node, renderer, support, imageLoader, options);
1615

17-
window.console.log(parser);
16+
var renderer = new CanvasRenderer(documentWidth(), documentHeight(), imageLoader);
17+
var parser = new NodeParser(node, renderer, support, imageLoader, options);
18+
19+
window.console.log(parser);
20+
});
1821
};
1922

2023
function documentWidth () {
@@ -41,13 +44,38 @@ function createWindowClone(ownerDocument, width, height) {
4144
container.style.position = "absolute";
4245
container.style.width = width + "px";
4346
container.style.height = height + "px";
44-
4547
ownerDocument.body.appendChild(container);
4648

47-
var documentClone = container.contentWindow.document;
48-
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
49-
50-
return container;
49+
return new Promise(function(resolve) {
50+
var loadedTimer = function() {
51+
/* Chrome doesn't detect relative background-images assigned in style sheets when fetched through getComputedStyle,
52+
before a certain time has passed
53+
*/
54+
if (container.contentWindow.getComputedStyle(div, null)['backgroundImage'] !== "none") {
55+
documentClone.body.removeChild(div);
56+
documentClone.body.removeChild(style);
57+
resolve(container);
58+
} else {
59+
window.setTimeout(loadedTimer, 10);
60+
}
61+
};
62+
var documentClone = container.contentWindow.document;
63+
/* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
64+
if window url is about:blank, we can assign the url to current by writing onto the document
65+
*/
66+
documentClone.open();
67+
documentClone.write("");
68+
documentClone.close();
69+
70+
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
71+
var div = documentClone.createElement("div");
72+
div.className = "html2canvas-ready-test";
73+
documentClone.body.appendChild(div);
74+
var style = documentClone.createElement("style");
75+
style.innerHTML = "body div.html2canvas-ready-test { background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }";
76+
documentClone.body.appendChild(style);
77+
loadedTimer();
78+
});
5179
}
5280

5381
function NodeParser(element, renderer, support, imageLoader, options) {
@@ -210,7 +238,7 @@ NodeParser.prototype.parse = function(stack) {
210238
.concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) {
211239
this.paint(container);
212240
if (rendered.indexOf(container.node) !== -1) {
213-
window.console.log(container, container.node);
241+
log(container, container.node);
214242
throw new Error("rendering twice");
215243
}
216244
rendered.push(container.node);

0 commit comments

Comments
 (0)