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

Add work around for chrome related background-image issues in iframe

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-01-26 15:50:13 +02:00
parent f474542382
commit ba9a33b1bc
1 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/core.js
View File

@ -1,20 +1,23 @@
window.html2canvas = function(nodeList, options) { window.html2canvas = function(nodeList, options) {
var container = createWindowClone(document, window.innerWidth, window.innerHeight);
var clonedWindow = container.contentWindow;
var element = (nodeList === undefined) ? document.body : nodeList[0];
var node = clonedWindow.document.documentElement;
var support = new Support();
var imageLoader = new ImageLoader(options, support);
options = options || {}; options = options || {};
if (options.logging) { if (options.logging) {
window.html2canvas.logging = true; window.html2canvas.logging = true;
window.html2canvas.start = Date.now(); window.html2canvas.start = Date.now();
} }
createWindowClone(document, window.innerWidth, window.innerHeight).then(function(container) {
log("Document cloned");
var clonedWindow = container.contentWindow;
var element = (nodeList === undefined) ? document.body : nodeList[0];
var node = clonedWindow.document.documentElement;
var support = new Support();
var imageLoader = new ImageLoader(options, support);
var renderer = new CanvasRenderer(documentWidth(), documentHeight(), imageLoader); var renderer = new CanvasRenderer(documentWidth(), documentHeight(), imageLoader);
var parser = new NodeParser(node, renderer, support, imageLoader, options); var parser = new NodeParser(node, renderer, support, imageLoader, options);
window.console.log(parser); window.console.log(parser);
});
}; };
function documentWidth () { function documentWidth () {
@ -41,13 +44,38 @@ function createWindowClone(ownerDocument, width, height) {
container.style.position = "absolute"; container.style.position = "absolute";
container.style.width = width + "px"; container.style.width = width + "px";
container.style.height = height + "px"; container.style.height = height + "px";
ownerDocument.body.appendChild(container); ownerDocument.body.appendChild(container);
return new Promise(function(resolve) {
var loadedTimer = function() {
/* Chrome doesn't detect relative background-images assigned in style sheets when fetched through getComputedStyle,
before a certain time has passed
*/
if (container.contentWindow.getComputedStyle(div, null)['backgroundImage'] !== "none") {
documentClone.body.removeChild(div);
documentClone.body.removeChild(style);
resolve(container);
} else {
window.setTimeout(loadedTimer, 10);
}
};
var documentClone = container.contentWindow.document; var documentClone = container.contentWindow.document;
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement); /* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
if window url is about:blank, we can assign the url to current by writing onto the document
*/
documentClone.open();
documentClone.write("");
documentClone.close();
return container; documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
var div = documentClone.createElement("div");
div.className = "html2canvas-ready-test";
documentClone.body.appendChild(div);
var style = documentClone.createElement("style");
style.innerHTML = "body div.html2canvas-ready-test { background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }";
documentClone.body.appendChild(style);
loadedTimer();
});
} }
function NodeParser(element, renderer, support, imageLoader, options) { function NodeParser(element, renderer, support, imageLoader, options) {
@ -210,7 +238,7 @@ NodeParser.prototype.parse = function(stack) {
.concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) { .concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) {
this.paint(container); this.paint(container);
if (rendered.indexOf(container.node) !== -1) { if (rendered.indexOf(container.node) !== -1) {
window.console.log(container, container.node); log(container, container.node);
throw new Error("rendering twice"); throw new Error("rendering twice");
} }
rendered.push(container.node); rendered.push(container.node);