From 9e1dc6ac0e7224948049b22e376ff0c7b5c9ff5b Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Tue, 1 Aug 2017 23:41:12 +0800
Subject: [PATCH] Use correct canvas size for full document render
---
src/Bounds.js | 22 ++++++++++++++++++++++
src/index.js | 14 ++++++++------
2 files changed, 30 insertions(+), 6 deletions(-)
diff --git a/src/Bounds.js b/src/Bounds.js
index aaba24c..1388fdc 100644
--- a/src/Bounds.js
+++ b/src/Bounds.js
@@ -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:
diff --git a/src/index.js b/src/index.js
index 1104a62..d423cbb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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;