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

Copy CSS properties individual with IE

Browse Source
This commit is contained in:
Niklas von Hertzen 2017-08-06 17:37:10 +08:00
parent 018ed765ad
commit 68900c3087
3 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Input.js
View File

@ -11,6 +11,7 @@ import Color from './Color';
import Length from './Length'; import Length from './Length';
import {Bounds} from './Bounds'; import {Bounds} from './Bounds';
import {TextBounds} from './TextBounds'; import {TextBounds} from './TextBounds';
import {copyCSSStyles} from './Util';
export const INPUT_COLOR = new Color([42, 42, 42]); export const INPUT_COLOR = new Color([42, 42, 42]);
const INPUT_BORDER_COLOR = new Color([165, 165, 165]); const INPUT_BORDER_COLOR = new Color([165, 165, 165]);
@ -108,7 +109,7 @@ const inlineFormElement = (value: string, node: HTMLElement, container: NodeCont
const body = node.ownerDocument.body; const body = node.ownerDocument.body;
if (value.length > 0 && body) { if (value.length > 0 && body) {
const wrapper = node.ownerDocument.createElement('html2canvaswrapper'); const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
wrapper.style = node.ownerDocument.defaultView.getComputedStyle(node, null).cssText; copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node, null), wrapper);
wrapper.style.position = 'fixed'; wrapper.style.position = 'fixed';
wrapper.style.left = `${container.bounds.left}px`; wrapper.style.left = `${container.bounds.left}px`;
wrapper.style.top = `${container.bounds.top}px`; wrapper.style.top = `${container.bounds.top}px`;

20
src/NodeParser.js
View File

@ -6,21 +6,21 @@ import StackingContext from './StackingContext';
import NodeContainer from './NodeContainer'; import NodeContainer from './NodeContainer';
import TextContainer from './TextContainer'; import TextContainer from './TextContainer';
import {inlineInputElement, inlineTextAreaElement, inlineSelectElement} from './Input'; import {inlineInputElement, inlineTextAreaElement, inlineSelectElement} from './Input';
import {copyCSSStyles} from './Util';
export const NodeParser = ( export const NodeParser = (
node: HTMLElement, node: HTMLElement,
imageLoader: ImageLoader, imageLoader: ImageLoader,
logger: Logger logger: Logger
): StackingContext => { ): StackingContext => {
const container = new NodeContainer(node, null, imageLoader);
const stack = new StackingContext(container, null, true);
createPseudoHideStyles(node.ownerDocument);
if (__DEV__) { if (__DEV__) {
logger.log(`Starting node parsing`); logger.log(`Starting node parsing`);
} }
const container = new NodeContainer(node, null, imageLoader);
const stack = new StackingContext(container, null, true);
createPseudoHideStyles(node.ownerDocument);
parseNodeTree(node, container, stack, imageLoader); parseNodeTree(node, container, stack, imageLoader);
if (__DEV__) { if (__DEV__) {
@ -127,15 +127,7 @@ const inlinePseudoElement = (node: HTMLElement, pseudoElt: ':before' | ':after')
anonymousReplacedElement.textContent = content; anonymousReplacedElement.textContent = content;
} }
if (style.cssText) { copyCSSStyles(style, anonymousReplacedElement);
anonymousReplacedElement.style = style.cssText;
} else {
// Edge does not provide value for cssText
for (let i = style.length - 1; i >= 0; i--) {
const property = style.item(i);
anonymousReplacedElement.style.setProperty(property, style.getPropertyValue(property));
}
}
anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`; anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
node.className += node.className +=

12
src/Util.js
View File

@ -2,3 +2,15 @@
'use strict'; 'use strict';
export const contains = (bit: number, value: number): boolean => (bit & value) !== 0; export const contains = (bit: number, value: number): boolean => (bit & value) !== 0;
export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): void => {
if (style.cssText) {
target.style = style.cssText;
} else {
// Edge does not provide value for cssText
for (let i = style.length - 1; i >= 0; i--) {
const property = style.item(i);
target.style.setProperty(property, style.getPropertyValue(property));
}
}
};