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 #2299 and #2296

Browse Source
This commit is contained in:
ysk2014 2020-07-28 17:58:57 +08:00
parent 809476ff7b
commit a38de5f461
3 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/render/canvas/canvas-renderer.ts
View File

@ -22,7 +22,7 @@ import {contentBox} from '../box-sizing';
import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
import {SVGElementContainer} from '../../dom/replaced-elements/svg-element-container';
import {ReplacedElementContainer} from '../../dom/replaced-elements/index';
import {EffectTarget, IElementEffect, isClipEffect, isTransformEffect} from '../effects';
import {EffectTarget, IElementEffect, isClipEffect, isTransformEffect, isOpacityEffect} from '../effects';
import {contains} from '../../core/bitwise';
import {calculateGradientDirection, calculateRadius, processColorStops} from '../../css/types/functions/gradient';
import {FIFTY_PERCENT, getAbsoluteValue} from '../../css/types/length-percentage';
@ -116,17 +116,15 @@ export class CanvasRenderer {
this.path(effect.path);
this.ctx.clip();
}
if (isOpacityEffect(effect)) {
this.ctx.globalAlpha = effect.val;
}
this._activeEffects.push(effect);
}
popEffect() {
const globalAlpha = this.ctx.globalAlpha;
this._activeEffects.pop();
this.ctx.restore();
if (globalAlpha) {
this.ctx.globalAlpha = globalAlpha;
}
}
async renderStack(stack: StackingContext) {

16
src/render/effects.ts
View File

@ -3,7 +3,8 @@ import {Path} from './path';
export const enum EffectType {
TRANSFORM = 0,
CLIP = 1
CLIP = 1,
OPACITY = 2
}
export const enum EffectTarget {
@ -44,6 +45,19 @@ export class ClipEffect implements IElementEffect {
}
}
export class OpacityEffect implements IElementEffect {
readonly type: EffectType;
readonly target: number;
readonly val: number;
constructor(val: number, target: EffectTarget) {
this.type = EffectType.OPACITY;
this.target = target;
this.val = val;
}
}
export const isTransformEffect = (effect: IElementEffect): effect is TransformEffect =>
effect.type === EffectType.TRANSFORM;
export const isClipEffect = (effect: IElementEffect): effect is ClipEffect => effect.type === EffectType.CLIP;
export const isOpacityEffect = (effect: IElementEffect): effect is OpacityEffect => effect.type === EffectType.OPACITY;

9
src/render/stacking-context.ts
View File

@ -1,7 +1,7 @@
import {ElementContainer, FLAGS} from '../dom/element-container';
import {contains} from '../core/bitwise';
import {BoundCurves, calculateBorderBoxPath, calculatePaddingBoxPath} from './bound-curves';
import {ClipEffect, EffectTarget, IElementEffect, TransformEffect} from './effects';
import {ClipEffect, EffectTarget, IElementEffect, TransformEffect, OpacityEffect} from './effects';
import {OVERFLOW} from '../css/property-descriptors/overflow';
import {equalPath} from './path';
import {DISPLAY} from '../css/property-descriptors/display';
@ -59,6 +59,10 @@ export class ElementPaint {
this.effects.push(new ClipEffect(paddingBox, EffectTarget.CONTENT));
}
}
if (element.styles.opacity < 1) {
this.effects.push(new OpacityEffect(element.styles.opacity, EffectTarget.CONTENT));
}
}
getParentEffects(): IElementEffect[] {
@ -70,6 +74,9 @@ export class ElementPaint {
effects.push(new ClipEffect(paddingBox, EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT));
}
}
if (this.container.styles.opacity < 1) {
effects.push(new OpacityEffect(this.container.styles.opacity, EffectTarget.CONTENT));
}
return effects;
}
}