Use correct canvas size for full document render

This commit is contained in:
Niklas von Hertzen 2017-08-01 23:41:12 +08:00
parent aafb0cfb9c
commit 7cc2b856cb
2 changed files with 30 additions and 6 deletions

View File

@ -78,6 +78,28 @@ export const calculateContentBox = (
);
};
export const parseDocumentSize = (document: Document): Bounds => {
const body = document.body;
const documentElement = document.documentElement;
if (!body || !documentElement) {
throw new Error(__DEV__ ? `Unable to get document size` : '');
}
const width = Math.max(
Math.max(body.scrollWidth, documentElement.scrollWidth),
Math.max(body.offsetWidth, documentElement.offsetWidth),
Math.max(body.clientWidth, documentElement.clientWidth)
);
const height = Math.max(
Math.max(body.scrollHeight, documentElement.scrollHeight),
Math.max(body.offsetHeight, documentElement.offsetHeight),
Math.max(body.clientHeight, documentElement.clientHeight)
);
return new Bounds(0, 0, width, height);
};
export const parsePathForBorder = (curves: BoundCurves, borderSide: BorderSide): Path => {
switch (borderSide) {
case TOP:

View File

@ -5,7 +5,7 @@ import {NodeParser} from './NodeParser';
import CanvasRenderer from './CanvasRenderer';
import Logger from './Logger';
import ImageLoader from './ImageLoader';
import {Bounds} from './Bounds';
import {Bounds, parseDocumentSize} from './Bounds';
import {cloneWindow} from './Clone';
import Color from './Color';
@ -62,8 +62,10 @@ const html2canvas = (element: HTMLElement, config: Options): Promise<HTMLCanvasE
}
const imageLoader = new ImageLoader(options, logger);
const stack = NodeParser(clonedElement, imageLoader, logger);
const width = window.innerWidth;
const height = window.innerHeight;
const size =
options.type === 'view' ? windowBounds : parseDocumentSize(clonedElement.ownerDocument);
const width = size.width;
const height = size.height;
canvas.width = Math.floor(width * options.scale);
canvas.height = Math.floor(height * options.scale);
canvas.style.width = `${width}px`;
@ -71,10 +73,10 @@ const html2canvas = (element: HTMLElement, config: Options): Promise<HTMLCanvasE
// http://www.w3.org/TR/css3-background/#special-backgrounds
const backgroundColor =
clonedElement === ownerDocument.documentElement
clonedElement === clonedElement.ownerDocument.documentElement
? stack.container.style.background.backgroundColor.isTransparent()
? ownerDocument.body
? new Color(getComputedStyle(ownerDocument.body).backgroundColor)
? clonedElement.ownerDocument.body
? new Color(getComputedStyle(clonedElement.ownerDocument.body).backgroundColor)
: null
: stack.container.style.background.backgroundColor
: null;