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

Implement Iframe rendering

Browse Source
This commit is contained in:
Niklas von Hertzen 2017-09-11 22:36:23 +08:00
parent aa47a3a3a6
commit 90a8422938
6 changed files with 247 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/Clone.js
View File

@ -3,27 +3,39 @@
import type {Bounds} from './Bounds';
import type {Options} from './index';
import type Logger from './Logger';
import type {ImageElement} from './ImageLoader';
import ImageLoader from './ImageLoader';
import {copyCSSStyles} from './Util';
import {parseBackgroundImage} from './parsing/background';
import CanvasRenderer from './renderer/CanvasRenderer';
export class DocumentCloner {
scrolledElements: Array<[HTMLElement, number, number]>;
referenceElement: HTMLElement;
clonedReferenceElement: HTMLElement;
documentElement: HTMLElement;
imageLoader: ImageLoader<string>;
imageLoader: ImageLoader<*>;
logger: Logger;
options: Options;
inlineImages: boolean;
copyStyles: boolean;
renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>;
constructor(element: HTMLElement, options: Options, logger: Logger, copyInline: boolean) {
constructor(
element: HTMLElement,
options: Options,
logger: Logger,
copyInline: boolean,
renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>
) {
this.referenceElement = element;
this.scrolledElements = [];
this.copyStyles = copyInline;
this.inlineImages = copyInline;
this.logger = logger;
this.options = options;
this.renderer = renderer;
this.imageLoader = new ImageLoader(options, logger, window);
// $FlowFixMe
this.documentElement = this.cloneNode(element.ownerDocument.documentElement);
@ -90,6 +102,51 @@ export class DocumentCloner {
}
}
if (node instanceof HTMLIFrameElement) {
const tempIframe = node.cloneNode(false);
const iframeKey = generateIframeKey();
tempIframe.setAttribute('data-html2canvas-internal-iframe-key', iframeKey);
this.imageLoader.cache[iframeKey] = getIframeDocumentElement(node, this.options)
.then(documentElement => {
return this.renderer(
documentElement,
{
async: this.options.async,
allowTaint: this.options.allowTaint,
backgroundColor: '#ffffff',
canvas: null,
imageTimeout: this.options.imageTimeout,
proxy: this.options.proxy,
removeContainer: this.options.removeContainer,
scale: this.options.scale,
target: new CanvasRenderer(),
type: 'view',
windowWidth: documentElement.ownerDocument.defaultView.innerWidth,
windowHeight: documentElement.ownerDocument.defaultView.innerHeight,
offsetX: documentElement.ownerDocument.defaultView.pageXOffset,
offsetY: documentElement.ownerDocument.defaultView.pageYOffset
},
this.logger.child(iframeKey)
);
})
.then(canvas => {
const iframeCanvas = document.createElement('img');
iframeCanvas.src = canvas.toDataURL();
if (tempIframe.parentNode) {
tempIframe.parentNode.replaceChild(
copyCSSStyles(
node.ownerDocument.defaultView.getComputedStyle(node),
iframeCanvas
),
tempIframe
);
}
return canvas;
});
return tempIframe;
}
return node.cloneNode(false);
}
@ -99,11 +156,13 @@ export class DocumentCloner {
? document.createTextNode(node.nodeValue)
: this.createElementClone(node);
if (this.referenceElement === node && clone instanceof HTMLElement) {
const window = node.ownerDocument.defaultView;
if (this.referenceElement === node && clone instanceof window.HTMLElement) {
this.clonedReferenceElement = clone;
}
if (clone instanceof HTMLBodyElement) {
if (clone instanceof window.HTMLBodyElement) {
createPseudoHideStyles(clone);
}
@ -114,10 +173,10 @@ export class DocumentCloner {
}
}
}
if (node instanceof HTMLElement && clone instanceof HTMLElement) {
if (node instanceof window.HTMLElement && clone instanceof window.HTMLElement) {
this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_BEFORE));
this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_AFTER));
if (this.copyStyles) {
if (this.copyStyles && !(node instanceof HTMLIFrameElement)) {
copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node), clone);
}
this.inlineAllImages(clone);
@ -127,13 +186,11 @@ export class DocumentCloner {
switch (node.nodeName) {
case 'CANVAS':
if (!this.copyStyles) {
// $FlowFixMe
cloneCanvasContents(node, clone);
}
break;
case 'TEXTAREA':
case 'SELECT':
// $FlowFixMe
clone.value = node.value;
break;
}
@ -248,14 +305,29 @@ const initNode = ([element, x, y]: [HTMLElement, number, number]) => {
element.scrollTop = y;
};
const generateIframeKey = (): string =>
Math.ceil(Date.now() + Math.random() * 10000000).toString(16);
const getIframeDocumentElement = (
node: HTMLIFrameElement,
options: Options
): Promise<HTMLElement> => {
try {
return Promise.resolve(node.contentWindow.document.documentElement);
} catch (e) {
return Promise.reject();
}
};
export const cloneWindow = (
ownerDocument: Document,
bounds: Bounds,
referenceElement: HTMLElement,
options: Options,
logger: Logger
): Promise<[HTMLIFrameElement, HTMLElement]> => {
const cloner = new DocumentCloner(referenceElement, options, logger, false);
logger: Logger,
renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>
): Promise<[HTMLIFrameElement, HTMLElement, ImageLoader<ImageElement>]> => {
const cloner = new DocumentCloner(referenceElement, options, logger, false, renderer);
const cloneIframeContainer = ownerDocument.createElement('iframe');
cloneIframeContainer.className = 'html2canvas-container';
@ -275,7 +347,7 @@ export const cloneWindow = (
);
}
return new Promise((resolve, reject) => {
let cloneWindow = cloneIframeContainer.contentWindow;
const cloneWindow = cloneIframeContainer.contentWindow;
const documentClone = cloneWindow.document;
/* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
@ -302,7 +374,11 @@ export const cloneWindow = (
cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement ||
cloner.clonedReferenceElement instanceof HTMLElement
) {
resolve([cloneIframeContainer, cloner.clonedReferenceElement]);
resolve([
cloneIframeContainer,
cloner.clonedReferenceElement,
cloner.imageLoader
]);
} else {
reject(
__DEV__

20
src/Logger.js
View File

@ -3,9 +3,15 @@
export default class Logger {
start: number;
id: ?string;
constructor() {
this.start = Date.now();
constructor(id: ?string, start: ?number) {
this.start = start ? start : Date.now();
this.id = id;
}
child(id: string) {
return new Logger(id, this.start);
}
// eslint-disable-next-line flowtype/no-weak-types
@ -15,7 +21,10 @@ export default class Logger {
.call(window.console.log, window.console)
.apply(
window.console,
[Date.now() - this.start + 'ms', 'html2canvas:'].concat([].slice.call(args, 0))
[
Date.now() - this.start + 'ms',
this.id ? `html2canvas (${this.id}):` : 'html2canvas:'
].concat([].slice.call(args, 0))
);
}
}
@ -27,7 +36,10 @@ export default class Logger {
.call(window.console.error, window.console)
.apply(
window.console,
[Date.now() - this.start + 'ms', 'html2canvas:'].concat([].slice.call(args, 0))
[
Date.now() - this.start + 'ms',
this.id ? `html2canvas (${this.id}):` : 'html2canvas:'
].concat([].slice.call(args, 0))
);
}
}

7
src/NodeContainer.js
View File

@ -239,6 +239,13 @@ const getImage = (
case 'CANVAS':
// $FlowFixMe
return imageLoader.loadCanvas(node);
case 'DIV':
const iframeKey = node.getAttribute('data-html2canvas-internal-iframe-key');
if (iframeKey) {
console.log('ok');
return iframeKey;
}
break;
}
return null;

131
src/Window.js Normal file
View File

@ -0,0 +1,131 @@
/* @flow */
'use strict';
import type {Options} from './index';
import Logger from './Logger';
import {NodeParser} from './NodeParser';
import Renderer from './Renderer';
import ForeignObjectRenderer from './renderer/ForeignObjectRenderer';
import Feature from './Feature';
import {Bounds, parseDocumentSize} from './Bounds';
import {cloneWindow, DocumentCloner} from './Clone';
import {FontMetrics} from './Font';
import Color, {TRANSPARENT} from './Color';
export const renderElement = (
element: HTMLElement,
options: Options,
logger: Logger
): Promise<*> => {
const ownerDocument = element.ownerDocument;
const windowBounds = new Bounds(
options.offsetX,
options.offsetY,
options.windowWidth,
options.windowHeight
);
const bounds = options.type === 'view' ? windowBounds : parseDocumentSize(ownerDocument);
// http://www.w3.org/TR/css3-background/#special-backgrounds
const documentBackgroundColor = ownerDocument.documentElement
? new Color(getComputedStyle(ownerDocument.documentElement).backgroundColor)
: TRANSPARENT;
const bodyBackgroundColor = ownerDocument.body
? new Color(getComputedStyle(ownerDocument.body).backgroundColor)
: TRANSPARENT;
const backgroundColor =
element === ownerDocument.documentElement
? documentBackgroundColor.isTransparent()
? bodyBackgroundColor.isTransparent()
? options.backgroundColor ? new Color(options.backgroundColor) : null
: bodyBackgroundColor
: documentBackgroundColor
: options.backgroundColor ? new Color(options.backgroundColor) : null;
// $FlowFixMe
return Feature.SUPPORT_FOREIGNOBJECT_DRAWING.then(
supportForeignObject =>
supportForeignObject
? (cloner => {
if (__DEV__) {
logger.log(`Document cloned, using foreignObject rendering`);
}
return cloner.imageLoader.ready().then(() => {
const renderer = new ForeignObjectRenderer(cloner.clonedReferenceElement);
return renderer.render({
bounds,
backgroundColor,
logger,
scale: options.scale
});
});
})(new DocumentCloner(element, options, logger, true, renderElement))
: cloneWindow(
ownerDocument,
windowBounds,
element,
options,
logger,
renderElement
).then(([container, clonedElement, imageLoader]) => {
if (__DEV__) {
logger.log(`Document cloned, using computed rendering`);
}
const stack = NodeParser(clonedElement, imageLoader, logger);
const clonedDocument = clonedElement.ownerDocument;
const width = bounds.width;
const height = bounds.height;
if (backgroundColor === stack.container.style.background.backgroundColor) {
stack.container.style.background.backgroundColor = TRANSPARENT;
}
return imageLoader.ready().then(imageStore => {
if (options.removeContainer === true) {
if (container.parentNode) {
container.parentNode.removeChild(container);
} else if (__DEV__) {
logger.log(
`Cannot detach cloned iframe as it is not in the DOM anymore`
);
}
}
const fontMetrics = new FontMetrics(clonedDocument);
if (__DEV__) {
logger.log(`Starting renderer`);
}
const renderOptions = {
backgroundColor,
fontMetrics,
imageStore,
logger,
scale: options.scale,
width,
height
};
if (Array.isArray(options.target)) {
return Promise.all(
options.target.map(target => {
const renderer = new Renderer(target, renderOptions);
return renderer.render(stack);
})
);
} else {
const renderer = new Renderer(options.target, renderOptions);
return renderer.render(stack);
}
});
})
);
};

123
src/index.js
View File

@ -3,17 +3,9 @@
import type {RenderTarget} from './Renderer';
import {NodeParser} from './NodeParser';
import Renderer from './Renderer';
import ForeignObjectRenderer from './renderer/ForeignObjectRenderer';
import CanvasRenderer from './renderer/CanvasRenderer';
import Logger from './Logger';
import ImageLoader from './ImageLoader';
import Feature from './Feature';
import {Bounds, parseDocumentSize} from './Bounds';
import {cloneWindow, DocumentCloner} from './Clone';
import {FontMetrics} from './Font';
import Color, {TRANSPARENT} from './Color';
import {renderElement} from './Window';
export type Options = {
async: ?boolean,
@ -58,118 +50,7 @@ const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
offsetY: defaultView.pageYOffset
};
const options = {...defaultOptions, ...config};
const windowBounds = new Bounds(
options.offsetX,
options.offsetY,
options.windowWidth,
options.windowHeight
);
const bounds = options.type === 'view' ? windowBounds : parseDocumentSize(ownerDocument);
// http://www.w3.org/TR/css3-background/#special-backgrounds
const documentBackgroundColor = ownerDocument.documentElement
? new Color(getComputedStyle(ownerDocument.documentElement).backgroundColor)
: TRANSPARENT;
const bodyBackgroundColor = ownerDocument.body
? new Color(getComputedStyle(ownerDocument.body).backgroundColor)
: TRANSPARENT;
const backgroundColor =
element === ownerDocument.documentElement
? documentBackgroundColor.isTransparent()
? bodyBackgroundColor.isTransparent()
? options.backgroundColor ? new Color(options.backgroundColor) : null
: bodyBackgroundColor
: documentBackgroundColor
: options.backgroundColor ? new Color(options.backgroundColor) : null;
// $FlowFixMe
const result = Feature.SUPPORT_FOREIGNOBJECT_DRAWING.then(
supportForeignObject =>
supportForeignObject
? (cloner => {
if (__DEV__) {
logger.log(`Document cloned, using foreignObject rendering`);
}
return cloner.imageLoader.ready().then(() => {
const renderer = new ForeignObjectRenderer(cloner.clonedReferenceElement);
return renderer.render({
bounds,
backgroundColor,
logger,
scale: options.scale
});
});
})(new DocumentCloner(element, options, logger, true))
: cloneWindow(
ownerDocument,
windowBounds,
element,
options,
logger
).then(([container, clonedElement]) => {
if (__DEV__) {
logger.log(`Document cloned, using computed rendering`);
}
const imageLoader = new ImageLoader(
options,
logger,
clonedElement.ownerDocument.defaultView
);
const stack = NodeParser(clonedElement, imageLoader, logger);
const clonedDocument = clonedElement.ownerDocument;
const width = bounds.width;
const height = bounds.height;
if (backgroundColor === stack.container.style.background.backgroundColor) {
stack.container.style.background.backgroundColor = TRANSPARENT;
}
return imageLoader.ready().then(imageStore => {
if (options.removeContainer === true) {
if (container.parentNode) {
container.parentNode.removeChild(container);
} else if (__DEV__) {
logger.log(
`Cannot detach cloned iframe as it is not in the DOM anymore`
);
}
}
const fontMetrics = new FontMetrics(clonedDocument);
if (__DEV__) {
logger.log(`Starting renderer`);
}
const renderOptions = {
backgroundColor,
fontMetrics,
imageStore,
logger,
scale: options.scale,
width,
height
};
if (Array.isArray(options.target)) {
return Promise.all(
options.target.map(target => {
const renderer = new Renderer(target, renderOptions);
return renderer.render(stack);
})
);
} else {
const renderer = new Renderer(options.target, renderOptions);
return renderer.render(stack);
}
});
})
);
const result = renderElement(element, {...defaultOptions, ...config}, logger);
if (__DEV__) {
return result.catch(e => {

3
tests/reftests/iframe.html
View File

@ -5,6 +5,7 @@
<script type="text/javascript" src="../test.js"></script>
</head>
<body>
<iframe src="/tests/assets/iframe/frame1.html" width="500" height="500"></iframe>
<div style="background: cornflowerblue; padding: 20px; width: 200px;">Parent document content</div>
<iframe src="/tests/assets/iframe/frame1.html" width="500" height="500"></iframe>
</body>
</html>