Fix white space appearing on element rendering (Fix #1438)

niklasvh · Apr 5, 2018 · a3e25d7 · a3e25d7
1 parent 9da0f60
commit a3e25d7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git a/src/Window.js b/src/Window.js
@@ -14,6 +14,7 @@ import {Bounds} from './Bounds';
 import {cloneWindow, DocumentCloner} from './Clone';
 import {FontMetrics} from './Font';
 import Color, {TRANSPARENT} from './Color';
+import {parseBounds, parseDocumentSize} from './Bounds';
 
 export const renderElement = (
     element: HTMLElement,
@@ -62,14 +63,32 @@ export const renderElement = (
                           .then(() => cloner.resourceLoader.ready())
                           .then(() => {
                               const renderer = new ForeignObjectRenderer(cloner.documentElement);
+
+                              const defaultView = ownerDocument.defaultView;
+                              const scrollX = defaultView.pageXOffset;
+                              const scrollY = defaultView.pageYOffset;
+
+                              const isDocument =
+                                  element.tagName === 'HTML' || element.tagName === 'BODY';
+
+                              const {width, height, left, top} = isDocument
+                                  ? parseDocumentSize(ownerDocument)
+                                  : parseBounds(element, scrollX, scrollY);
+
                               return renderer.render({
                                   backgroundColor,
                                   logger,
                                   scale: options.scale,
-                                  x: options.x,
-                                  y: options.y,
-                                  width: options.width,
-                                  height: options.height,
+                                  x: typeof options.x === 'number' ? options.x : left,
+                                  y: typeof options.y === 'number' ? options.y : top,
+                                  width:
+                                      typeof options.width === 'number'
+                                          ? options.width
+                                          : Math.ceil(width),
+                                  height:
+                                      typeof options.height === 'number'
+                                          ? options.height
+                                          : Math.ceil(height),
                                   windowWidth: options.windowWidth,
                                   windowHeight: options.windowHeight,
                                   scrollX: options.scrollX,
@@ -102,16 +121,33 @@ export const renderElement = (
                               logger.log(`Starting renderer`);
                           }
 
+                          const defaultView = clonedDocument.defaultView;
+                          const scrollX = defaultView.pageXOffset;
+                          const scrollY = defaultView.pageYOffset;
+
+                          const isDocument =
+                              clonedElement.tagName === 'HTML' || clonedElement.tagName === 'BODY';
+
+                          const {width, height, left, top} = isDocument
+                              ? parseDocumentSize(ownerDocument)
+                              : parseBounds(clonedElement, scrollX, scrollY);
+
                           const renderOptions = {
                               backgroundColor,
                               fontMetrics,
                               imageStore,
                               logger,
                               scale: options.scale,
-                              x: options.x,
-                              y: options.y,
-                              width: options.width,
-                              height: options.height
+                              x: typeof options.x === 'number' ? options.x : left,
+                              y: typeof options.y === 'number' ? options.y : top,
+                              width:
+                                  typeof options.width === 'number'
+                                      ? options.width
+                                      : Math.ceil(width),
+                              height:
+                                  typeof options.height === 'number'
+                                      ? options.height
+                                      : Math.ceil(height)
                           };
 
                           if (Array.isArray(options.target)) {

diff --git a/src/index.js b/src/index.js
@@ -6,7 +6,6 @@ import type {RenderTarget} from './Renderer';
 import CanvasRenderer from './renderer/CanvasRenderer';
 import Logger from './Logger';
 import {renderElement} from './Window';
-import {parseBounds, parseDocumentSize} from './Bounds';
 
 export type Options = {
     async: ?boolean,
@@ -50,15 +49,6 @@ const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
     }
     const defaultView = ownerDocument.defaultView;
 
-    const scrollX = defaultView.pageXOffset;
-    const scrollY = defaultView.pageYOffset;
-
-    const isDocument = element.tagName === 'HTML' || element.tagName === 'BODY';
-
-    const {width, height, left, top} = isDocument
-        ? parseDocumentSize(ownerDocument)
-        : parseBounds(element, scrollX, scrollY);
-
     const defaultOptions = {
         async: true,
         allowTaint: false,
@@ -71,10 +61,6 @@ const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
         scale: defaultView.devicePixelRatio || 1,
         target: new CanvasRenderer(config.canvas),
         useCORS: false,
-        x: left,
-        y: top,
-        width: Math.ceil(width),
-        height: Math.ceil(height),
         windowWidth: defaultView.innerWidth,
         windowHeight: defaultView.innerHeight,
         scrollX: defaultView.pageXOffset,