mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/Window.js
View File

@ -14,6 +14,7 @@ import {Bounds} from './Bounds';
import {cloneWindow, DocumentCloner} from './Clone'; import {cloneWindow, DocumentCloner} from './Clone';
import {FontMetrics} from './Font'; import {FontMetrics} from './Font';
import Color, {TRANSPARENT} from './Color'; import Color, {TRANSPARENT} from './Color';
import {parseBounds, parseDocumentSize} from './Bounds';
export const renderElement = ( export const renderElement = (
element: HTMLElement, element: HTMLElement,
@ -62,14 +63,32 @@ export const renderElement = (
.then(() => cloner.resourceLoader.ready()) .then(() => cloner.resourceLoader.ready())
.then(() => { .then(() => {
const renderer = new ForeignObjectRenderer(cloner.documentElement); 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({ return renderer.render({
backgroundColor, backgroundColor,
logger, logger,
scale: options.scale, scale: options.scale,
x: options.x, x: typeof options.x === 'number' ? options.x : left,
y: options.y, y: typeof options.y === 'number' ? options.y : top,
width: options.width, width:
height: options.height, typeof options.width === 'number'
? options.width
: Math.ceil(width),
height:
typeof options.height === 'number'
? options.height
: Math.ceil(height),
windowWidth: options.windowWidth, windowWidth: options.windowWidth,
windowHeight: options.windowHeight, windowHeight: options.windowHeight,
scrollX: options.scrollX, scrollX: options.scrollX,
@ -102,16 +121,33 @@ export const renderElement = (
logger.log(`Starting renderer`); 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 = { const renderOptions = {
backgroundColor, backgroundColor,
fontMetrics, fontMetrics,
imageStore, imageStore,
logger, logger,
scale: options.scale, scale: options.scale,
x: options.x, x: typeof options.x === 'number' ? options.x : left,
y: options.y, y: typeof options.y === 'number' ? options.y : top,
width: options.width, width:
height: options.height typeof options.width === 'number'
? options.width
: Math.ceil(width),
height:
typeof options.height === 'number'
? options.height
: Math.ceil(height)
}; };
if (Array.isArray(options.target)) { if (Array.isArray(options.target)) {

14
src/index.js
View File

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