Use correct canvas size for full document render

niklasvh · Aug 1, 2017 · 7cc2b85 · 7cc2b85
1 parent aafb0cf
commit 7cc2b85
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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,19 +62,21 @@ 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`;
         canvas.style.height = `${height}px`;
 
         // 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;