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 simpler api for rendering external urls

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-09-27 21:07:25 +03:00
parent 1e19832171
commit 19777c6623
6 changed files with 151 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.jshintrc
View File

@ -15,5 +15,5 @@
"jQuery": true "jQuery": true
}, },
"predef": ["NodeParser", "NodeContainer", "StackingContext", "TextContainer", "ImageLoader", "CanvasRenderer", "Renderer", "Support", "bind", "Promise", "getBounds", "offsetBounds", "XHR", "predef": ["NodeParser", "NodeContainer", "StackingContext", "TextContainer", "ImageLoader", "CanvasRenderer", "Renderer", "Support", "bind", "Promise", "getBounds", "offsetBounds", "XHR",
"ImageContainer", "ProxyImageContainer", "DummyImageContainer", "Font", "FontMetrics", "GradientContainer", "LinearGradientContainer", "WebkitGradientContainer", "SVGContainer", "SVGNodeContainer", "FrameContainer", "html2canvas", "log", "smallImage", "parseBackgrounds", "createWindowClone", "decode64", "Proxy", "ProxyURL"] "ImageContainer", "ProxyImageContainer", "DummyImageContainer", "Font", "FontMetrics", "GradientContainer", "LinearGradientContainer", "WebkitGradientContainer", "SVGContainer", "SVGNodeContainer", "FrameContainer", "html2canvas", "log", "smallImage", "parseBackgrounds", "loadUrlDocument", "decode64", "Proxy", "ProxyURL"]
} }

91
dist/html2canvas.js vendored
View File

@ -580,6 +580,16 @@ window.html2canvas = function(nodeList, options) {
options.async = typeof(options.async) === "undefined" ? true : options.async; options.async = typeof(options.async) === "undefined" ? true : options.async;
options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint; options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint;
options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer; options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer;
options.javascriptEnabled = typeof(options.javascriptEnabled) === "undefined" ? false : options.javascriptEnabled;
if (typeof(nodeList) === "string") {
if (typeof(options.proxy) !== "string") {
return Promise.reject("Proxy must be used when rendering url");
}
return loadUrlDocument(absoluteUrl(nodeList), options.proxy, document, window.innerWidth, window.innerHeight, options).then(function(container) {
return renderWindow(container.contentWindow.document.documentElement, container, options, window.innerWidth, window.innerHeight);
});
}
var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0]; var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
node.setAttribute(html2canvasNodeAttribute, "true"); node.setAttribute(html2canvasNodeAttribute, "true");
@ -602,6 +612,12 @@ function renderDocument(document, options, windowWidth, windowHeight) {
document.querySelector(selector).removeAttribute(html2canvasNodeAttribute); document.querySelector(selector).removeAttribute(html2canvasNodeAttribute);
var clonedWindow = container.contentWindow; var clonedWindow = container.contentWindow;
var node = clonedWindow.document.querySelector(selector); var node = clonedWindow.document.querySelector(selector);
return renderWindow(node, container, options, windowWidth, windowHeight);
});
}
function renderWindow(node, container, options, windowWidth, windowHeight) {
var clonedWindow = container.contentWindow;
var support = new Support(clonedWindow.document); var support = new Support(clonedWindow.document);
var imageLoader = new ImageLoader(options, support); var imageLoader = new ImageLoader(options, support);
var bounds = getBounds(node); var bounds = getBounds(node);
@ -612,13 +628,16 @@ function renderDocument(document, options, windowWidth, windowHeight) {
return parser.ready.then(function() { return parser.ready.then(function() {
log("Finished rendering"); log("Finished rendering");
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, bounds); var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, bounds);
cleanupContainer(container, options);
return canvas;
});
}
function cleanupContainer(container, options) {
if (options.removeContainer) { if (options.removeContainer) {
container.parentNode.removeChild(container); container.parentNode.removeChild(container);
log("Cleaned up container"); log("Cleaned up container");
} }
return canvas;
});
});
} }
function crop(canvas, bounds) { function crop(canvas, bounds) {
@ -684,13 +703,38 @@ function createWindowClone(ownerDocument, containerDocument, width, height, opti
documentClone.write("<!DOCTYPE html>"); documentClone.write("<!DOCTYPE html>");
documentClone.close(); documentClone.close();
documentClone.replaceChild(removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement); documentClone.replaceChild(options.javascriptEnabled === true ? documentClone.adoptNode(documentElement) : removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
if (options.type === "view") { if (options.type === "view") {
container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset); container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset);
} }
}); });
} }
function loadUrlDocument(src, proxy, document, width, height, options) {
return new Proxy(src, proxy, window.document).then(documentFromHTML(src)).then(function(doc) {
return createWindowClone(doc, document, width, height, options);
});
}
function documentFromHTML(src) {
return function(html) {
var doc = document.implementation.createHTMLDocument("");
doc.open();
doc.write(html);
doc.close();
var b = doc.querySelector("base");
if (!b || !b.href.host) {
var base = doc.createElement("base");
base.href = src;
doc.head.insertBefore(base, doc.head.firstChild);
}
return doc;
};
}
function labelCanvasElements(ownerDocument) { function labelCanvasElements(ownerDocument) {
[].slice.call(ownerDocument.querySelectorAll("canvas"), 0).forEach(function(canvas) { [].slice.call(ownerDocument.querySelectorAll("canvas"), 0).forEach(function(canvas) {
canvas.setAttribute(html2canvasCanvasCloneAttribute, "canvas-" + html2canvasCanvasCloneIndex++); canvas.setAttribute(html2canvasCanvasCloneAttribute, "canvas-" + html2canvasCanvasCloneIndex++);
@ -728,6 +772,13 @@ function isElementNode(node) {
return node.nodeType === Node.ELEMENT_NODE; return node.nodeType === Node.ELEMENT_NODE;
} }
function absoluteUrl(url) {
var link = document.createElement("a");
link.href = url;
link.href = link.href;
return link;
}
function DummyImageContainer(src) { function DummyImageContainer(src) {
this.src = src; this.src = src;
log("DummyImageContainer for", src); log("DummyImageContainer for", src);
@ -806,12 +857,12 @@ FontMetrics.prototype.getMetrics = function(family, size) {
return this.data[family + "-" + size]; return this.data[family + "-" + size];
}; };
function FrameContainer(container, sameOrigin, proxy) { function FrameContainer(container, sameOrigin, options) {
this.image = null; this.image = null;
this.src = container; this.src = container;
var self = this; var self = this;
var bounds = getBounds(container); var bounds = getBounds(container);
this.promise = (!sameOrigin ? this.proxyLoad(proxy, bounds) : new Promise(function(resolve) { this.promise = (!sameOrigin ? this.proxyLoad(options.proxy, bounds, options) : new Promise(function(resolve) {
if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) { if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) {
container.contentWindow.onload = container.onload = function() { container.contentWindow.onload = container.onload = function() {
resolve(container); resolve(container);
@ -820,37 +871,17 @@ function FrameContainer(container, sameOrigin, proxy) {
resolve(container); resolve(container);
} }
})).then(function(container) { })).then(function(container) {
return html2canvas(container.contentWindow.document.documentElement, {type: 'view', proxy: proxy}); return html2canvas(container.contentWindow.document.documentElement, {type: 'view', proxy: options.proxy, javascriptEnabled: options.javascriptEnabled, removeContainer: options.removeContainer});
}).then(function(canvas) { }).then(function(canvas) {
return self.image = canvas; return self.image = canvas;
}); });
} }
FrameContainer.prototype.proxyLoad = function(proxy, bounds) { FrameContainer.prototype.proxyLoad = function(proxy, bounds, options) {
var container = this.src; var container = this.src;
return new Proxy(container.src, proxy, window.document).then(documentFromHTML(container)).then(function(doc) { return loadUrlDocument(container.src, proxy, container.ownerDocument, bounds.width, bounds.height, options);
return createWindowClone(doc, container.ownerDocument, bounds.width, bounds.height, {});
});
}; };
function documentFromHTML(container) {
return function(html) {
var doc = document.implementation.createHTMLDocument("");
doc.open();
doc.write(html);
doc.close();
var b = doc.querySelector("base");
if (!b || !b.href.host) {
var base = doc.createElement("base");
base.href = container.src;
doc.head.insertBefore(base, doc.head.firstChild);
}
return doc;
};
}
function GradientContainer(imageData) { function GradientContainer(imageData) {
this.src = imageData.value; this.src = imageData.value;
this.colorStops = []; this.colorStops = [];
@ -956,7 +987,7 @@ ImageLoader.prototype.loadImage = function(imageData) {
} else if (imageData.method === "svg") { } else if (imageData.method === "svg") {
return new SVGNodeContainer(imageData.args[0], this.support.svg); return new SVGNodeContainer(imageData.args[0], this.support.svg);
} else if (imageData.method === "IFRAME") { } else if (imageData.method === "IFRAME") {
return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options.proxy); return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options);
} else { } else {
return new DummyImageContainer(imageData); return new DummyImageContainer(imageData);
} }

4
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

59
src/core.js
View File

@ -12,6 +12,16 @@ window.html2canvas = function(nodeList, options) {
options.async = typeof(options.async) === "undefined" ? true : options.async; options.async = typeof(options.async) === "undefined" ? true : options.async;
options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint; options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint;
options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer; options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer;
options.javascriptEnabled = typeof(options.javascriptEnabled) === "undefined" ? false : options.javascriptEnabled;
if (typeof(nodeList) === "string") {
if (typeof(options.proxy) !== "string") {
return Promise.reject("Proxy must be used when rendering url");
}
return loadUrlDocument(absoluteUrl(nodeList), options.proxy, document, window.innerWidth, window.innerHeight, options).then(function(container) {
return renderWindow(container.contentWindow.document.documentElement, container, options, window.innerWidth, window.innerHeight);
});
}
var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0]; var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
node.setAttribute(html2canvasNodeAttribute, "true"); node.setAttribute(html2canvasNodeAttribute, "true");
@ -34,6 +44,12 @@ function renderDocument(document, options, windowWidth, windowHeight) {
document.querySelector(selector).removeAttribute(html2canvasNodeAttribute); document.querySelector(selector).removeAttribute(html2canvasNodeAttribute);
var clonedWindow = container.contentWindow; var clonedWindow = container.contentWindow;
var node = clonedWindow.document.querySelector(selector); var node = clonedWindow.document.querySelector(selector);
return renderWindow(node, container, options, windowWidth, windowHeight);
});
}
function renderWindow(node, container, options, windowWidth, windowHeight) {
var clonedWindow = container.contentWindow;
var support = new Support(clonedWindow.document); var support = new Support(clonedWindow.document);
var imageLoader = new ImageLoader(options, support); var imageLoader = new ImageLoader(options, support);
var bounds = getBounds(node); var bounds = getBounds(node);
@ -44,13 +60,16 @@ function renderDocument(document, options, windowWidth, windowHeight) {
return parser.ready.then(function() { return parser.ready.then(function() {
log("Finished rendering"); log("Finished rendering");
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, bounds); var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, bounds);
cleanupContainer(container, options);
return canvas;
});
}
function cleanupContainer(container, options) {
if (options.removeContainer) { if (options.removeContainer) {
container.parentNode.removeChild(container); container.parentNode.removeChild(container);
log("Cleaned up container"); log("Cleaned up container");
} }
return canvas;
});
});
} }
function crop(canvas, bounds) { function crop(canvas, bounds) {
@ -116,13 +135,38 @@ function createWindowClone(ownerDocument, containerDocument, width, height, opti
documentClone.write("<!DOCTYPE html>"); documentClone.write("<!DOCTYPE html>");
documentClone.close(); documentClone.close();
documentClone.replaceChild(removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement); documentClone.replaceChild(options.javascriptEnabled === true ? documentClone.adoptNode(documentElement) : removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
if (options.type === "view") { if (options.type === "view") {
container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset); container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset);
} }
}); });
} }
function loadUrlDocument(src, proxy, document, width, height, options) {
return new Proxy(src, proxy, window.document).then(documentFromHTML(src)).then(function(doc) {
return createWindowClone(doc, document, width, height, options);
});
}
function documentFromHTML(src) {
return function(html) {
var doc = document.implementation.createHTMLDocument("");
doc.open();
doc.write(html);
doc.close();
var b = doc.querySelector("base");
if (!b || !b.href.host) {
var base = doc.createElement("base");
base.href = src;
doc.head.insertBefore(base, doc.head.firstChild);
}
return doc;
};
}
function labelCanvasElements(ownerDocument) { function labelCanvasElements(ownerDocument) {
[].slice.call(ownerDocument.querySelectorAll("canvas"), 0).forEach(function(canvas) { [].slice.call(ownerDocument.querySelectorAll("canvas"), 0).forEach(function(canvas) {
canvas.setAttribute(html2canvasCanvasCloneAttribute, "canvas-" + html2canvasCanvasCloneIndex++); canvas.setAttribute(html2canvasCanvasCloneAttribute, "canvas-" + html2canvasCanvasCloneIndex++);
@ -159,3 +203,10 @@ function removeScriptNodes(parent) {
function isElementNode(node) { function isElementNode(node) {
return node.nodeType === Node.ELEMENT_NODE; return node.nodeType === Node.ELEMENT_NODE;
} }
function absoluteUrl(url) {
var link = document.createElement("a");
link.href = url;
link.href = link.href;
return link;
}

30
src/framecontainer.js
View File

@ -1,9 +1,9 @@
function FrameContainer(container, sameOrigin, proxy) { function FrameContainer(container, sameOrigin, options) {
this.image = null; this.image = null;
this.src = container; this.src = container;
var self = this; var self = this;
var bounds = getBounds(container); var bounds = getBounds(container);
this.promise = (!sameOrigin ? this.proxyLoad(proxy, bounds) : new Promise(function(resolve) { this.promise = (!sameOrigin ? this.proxyLoad(options.proxy, bounds, options) : new Promise(function(resolve) {
if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) { if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) {
container.contentWindow.onload = container.onload = function() { container.contentWindow.onload = container.onload = function() {
resolve(container); resolve(container);
@ -12,33 +12,13 @@ function FrameContainer(container, sameOrigin, proxy) {
resolve(container); resolve(container);
} }
})).then(function(container) { })).then(function(container) {
return html2canvas(container.contentWindow.document.documentElement, {type: 'view', proxy: proxy}); return html2canvas(container.contentWindow.document.documentElement, {type: 'view', proxy: options.proxy, javascriptEnabled: options.javascriptEnabled, removeContainer: options.removeContainer});
}).then(function(canvas) { }).then(function(canvas) {
return self.image = canvas; return self.image = canvas;
}); });
} }
FrameContainer.prototype.proxyLoad = function(proxy, bounds) { FrameContainer.prototype.proxyLoad = function(proxy, bounds, options) {
var container = this.src; var container = this.src;
return new Proxy(container.src, proxy, window.document).then(documentFromHTML(container)).then(function(doc) { return loadUrlDocument(container.src, proxy, container.ownerDocument, bounds.width, bounds.height, options);
return createWindowClone(doc, container.ownerDocument, bounds.width, bounds.height, {});
});
}; };
function documentFromHTML(container) {
return function(html) {
var doc = document.implementation.createHTMLDocument("");
doc.open();
doc.write(html);
doc.close();
var b = doc.querySelector("base");
if (!b || !b.href.host) {
var base = doc.createElement("base");
base.href = container.src;
doc.head.insertBefore(base, doc.head.firstChild);
}
return doc;
};
}

2
src/imageloader.js
View File

@ -69,7 +69,7 @@ ImageLoader.prototype.loadImage = function(imageData) {
} else if (imageData.method === "svg") { } else if (imageData.method === "svg") {
return new SVGNodeContainer(imageData.args[0], this.support.svg); return new SVGNodeContainer(imageData.args[0], this.support.svg);
} else if (imageData.method === "IFRAME") { } else if (imageData.method === "IFRAME") {
return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options.proxy); return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options);
} else { } else {
return new DummyImageContainer(imageData); return new DummyImageContainer(imageData);
} }