Add preliminary support for same-origin iframes

This commit is contained in:
Niklas von Hertzen
2014-09-16 20:12:13 +03:00
parent 6347e7f043
commit d4c9a41873
10 changed files with 119 additions and 23 deletions

View File

@ -34,8 +34,8 @@ function renderDocument(document, options, windowWidth, windowHeight) {
var support = new Support(clonedWindow.document);
var imageLoader = new ImageLoader(options, support);
var bounds = getBounds(node);
var width = options.type === "view" ? Math.min(bounds.width, windowWidth) : documentWidth();
var height = options.type === "view" ? Math.min(bounds.height, windowHeight) : documentHeight();
var width = options.width != null ? options.width : options.type === "view" ? Math.min(bounds.width, windowWidth) : documentWidth();
var height = options.height != null ? options.height : options.type === "view" ? Math.min(bounds.height, windowHeight) : documentHeight();
var renderer = new CanvasRenderer(width, height, imageLoader, options, document);
var parser = new NodeParser(node, renderer, support, imageLoader, options);
return parser.ready.then(function() {

23
src/framecontainer.js Normal file
View File

@ -0,0 +1,23 @@
function FrameContainer(container) {
this.image = null;
this.src = container;
var self = this;
var bounds = getBounds(container);
this.promise = new Promise(function(resolve) {
if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) {
container.contentWindow.onload = container.onload = function() {
resolve(container);
};
} else {
resolve(container);
}
}).then(function(container) {
return html2canvas(container.contentWindow.document.documentElement, {
width: bounds.width,
height: bounds.height
});
}).then(function(canvas) {
return self.image = canvas;
});
}

View File

@ -7,8 +7,22 @@ function ImageLoader(options, support) {
ImageLoader.prototype.findImages = function(nodes) {
var images = [];
nodes.filter(isImage).map(urlImage).forEach(this.addImage(images, this.loadImage), this);
nodes.filter(isSVGNode).map(svgImage).forEach(this.addImage(images, this.loadImage), this);
nodes.reduce(function(imageNodes, container) {
switch(container.node.nodeName) {
case "IMG":
return imageNodes.concat([{
args: [container.node.src],
method: "url"
}]);
case "svg":
case "IFRAME":
return imageNodes.concat([{
args: [container.node],
method: container.node.nodeName
}]);
}
return imageNodes;
}, []).forEach(this.addImage(images, this.loadImage), this);
return images;
};
@ -54,6 +68,8 @@ ImageLoader.prototype.loadImage = function(imageData) {
return new WebkitGradientContainer(imageData);
} else if (imageData.method === "svg") {
return new SVGNodeContainer(imageData.args[0]);
} else if (imageData.method === "IFRAME") {
return new FrameContainer(imageData.args[0]);
} else {
return new DummyImageContainer(imageData);
}

View File

@ -101,7 +101,6 @@ NodeParser.prototype.getPseudoElement = function(container, type) {
var pseudoNode = document.createElement(isImage ? 'img' : 'html2canvaspseudoelement');
var pseudoContainer = new NodeContainer(pseudoNode, container);
for (var i = style.length-1; i >= 0; i--) {
var property = toCamelCase(style.item(i));
pseudoNode.style[property] = style[property];
@ -251,11 +250,12 @@ NodeParser.prototype.paintNode = function(container) {
this.renderer.renderBorders(borderData.borders);
switch(container.node.nodeName) {
case "svg":
var svgContainer = this.images.get(container.node);
if (svgContainer) {
this.renderer.renderImage(container, bounds, borderData, svgContainer);
case "IFRAME":
var imgContainer = this.images.get(container.node);
if (imgContainer) {
this.renderer.renderImage(container, bounds, borderData, imgContainer);
} else {
log("Error loading <svg>", container.node);
log("Error loading <" + container.node.nodeName + ">", container.node);
}
break;
case "IMG":