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

This commit is contained in:
Niklas von Hertzen 2018-04-05 20:41:16 +08:00
parent 9da0f60551
commit a3e25d71cb
2 changed files with 44 additions and 22 deletions

View File

@ -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)) {

View File

@ -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,