2017-07-29 05:07:42 +03:00
|
|
|
/* @flow */
|
|
|
|
'use strict';
|
|
|
|
|
2017-08-06 19:26:09 +03:00
|
|
|
import type {RenderTarget} from './Renderer';
|
|
|
|
|
2017-08-06 15:21:35 +03:00
|
|
|
import CanvasRenderer from './renderer/CanvasRenderer';
|
2017-07-29 05:07:42 +03:00
|
|
|
import Logger from './Logger';
|
2017-09-11 17:36:23 +03:00
|
|
|
import {renderElement} from './Window';
|
2017-07-29 05:07:42 +03:00
|
|
|
|
|
|
|
export type Options = {
|
2017-08-01 17:36:51 +03:00
|
|
|
allowTaint: ?boolean,
|
2017-08-28 16:27:39 +03:00
|
|
|
backgroundColor: string,
|
2017-08-01 17:36:51 +03:00
|
|
|
canvas: ?HTMLCanvasElement,
|
2017-09-28 14:46:00 +03:00
|
|
|
foreignObjectRendering: boolean,
|
2018-02-15 16:22:51 +03:00
|
|
|
ignoreElements?: HTMLElement => boolean,
|
2017-08-18 16:53:42 +03:00
|
|
|
imageTimeout: number,
|
2017-12-11 15:23:43 +03:00
|
|
|
logging: boolean,
|
2018-02-15 16:40:34 +03:00
|
|
|
onclone?: Document => void,
|
2017-08-01 17:36:51 +03:00
|
|
|
proxy: ?string,
|
|
|
|
removeContainer: ?boolean,
|
2017-08-06 12:53:38 +03:00
|
|
|
scale: number,
|
2017-08-18 15:52:29 +03:00
|
|
|
target: RenderTarget<*>,
|
2017-12-21 18:38:01 +03:00
|
|
|
useCORS: boolean,
|
2017-09-27 17:14:50 +03:00
|
|
|
width: number,
|
|
|
|
height: number,
|
|
|
|
x: number,
|
|
|
|
y: number,
|
|
|
|
scrollX: number,
|
|
|
|
scrollY: number,
|
2017-08-06 12:53:38 +03:00
|
|
|
windowWidth: number,
|
2017-09-27 17:14:50 +03:00
|
|
|
windowHeight: number
|
2017-07-29 05:07:42 +03:00
|
|
|
};
|
|
|
|
|
2017-08-30 16:31:51 +03:00
|
|
|
const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
|
|
|
|
const config = conf || {};
|
2017-12-11 15:23:43 +03:00
|
|
|
const logger = new Logger(typeof config.logging === 'boolean' ? config.logging : true);
|
2018-02-15 17:07:40 +03:00
|
|
|
logger.log(`html2canvas ${__VERSION__}`);
|
2017-08-01 15:54:18 +03:00
|
|
|
|
2017-12-07 10:47:42 +03:00
|
|
|
if (__DEV__ && typeof config.onrendered === 'function') {
|
|
|
|
logger.error(
|
|
|
|
`onrendered option is deprecated, html2canvas returns a Promise with the canvas as the value`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-08-01 15:54:18 +03:00
|
|
|
const ownerDocument = element.ownerDocument;
|
2017-12-03 12:07:10 +03:00
|
|
|
if (!ownerDocument) {
|
2017-12-03 12:30:52 +03:00
|
|
|
return Promise.reject(`Provided element is not within a Document`);
|
2017-12-03 12:07:10 +03:00
|
|
|
}
|
2017-08-01 15:54:18 +03:00
|
|
|
const defaultView = ownerDocument.defaultView;
|
|
|
|
|
2017-08-01 17:36:51 +03:00
|
|
|
const defaultOptions = {
|
|
|
|
allowTaint: false,
|
2017-12-12 16:23:53 +03:00
|
|
|
backgroundColor: '#ffffff',
|
2017-08-17 18:14:44 +03:00
|
|
|
imageTimeout: 15000,
|
2017-12-11 15:51:20 +03:00
|
|
|
logging: true,
|
2017-08-01 17:36:51 +03:00
|
|
|
proxy: null,
|
|
|
|
removeContainer: true,
|
2017-12-09 12:51:28 +03:00
|
|
|
foreignObjectRendering: false,
|
2017-08-06 12:53:38 +03:00
|
|
|
scale: defaultView.devicePixelRatio || 1,
|
2017-08-06 19:26:09 +03:00
|
|
|
target: new CanvasRenderer(config.canvas),
|
2017-12-21 18:38:01 +03:00
|
|
|
useCORS: false,
|
2017-08-06 12:53:38 +03:00
|
|
|
windowWidth: defaultView.innerWidth,
|
2017-08-08 19:50:31 +03:00
|
|
|
windowHeight: defaultView.innerHeight,
|
2017-09-27 17:14:50 +03:00
|
|
|
scrollX: defaultView.pageXOffset,
|
|
|
|
scrollY: defaultView.pageYOffset
|
2017-08-01 17:36:51 +03:00
|
|
|
};
|
|
|
|
|
2017-09-11 17:36:23 +03:00
|
|
|
const result = renderElement(element, {...defaultOptions, ...config}, logger);
|
2017-08-03 19:13:20 +03:00
|
|
|
|
|
|
|
if (__DEV__) {
|
|
|
|
return result.catch(e => {
|
|
|
|
logger.error(e);
|
|
|
|
throw e;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return result;
|
2017-07-29 05:07:42 +03:00
|
|
|
};
|
|
|
|
|
2017-08-06 19:26:09 +03:00
|
|
|
html2canvas.CanvasRenderer = CanvasRenderer;
|
2019-04-08 00:24:17 +03:00
|
|
|
export default html2canvas;
|