html2canvas-pro 2.0.3 → 2.1.0

package/src/render/effects.ts

@@ -0,0 +1,75 @@
+import { Matrix } from '../css/property-descriptors/transform';
+import { Path } from './path';
+
+export const enum EffectType {
+    TRANSFORM = 0,
+    CLIP = 1,
+    OPACITY = 2,
+    CLIP_PATH = 3,
+    BLEND = 4
+}
+
+export const enum EffectTarget {
+    BACKGROUND_BORDERS = 1 << 1,
+    CONTENT = 1 << 2
+}
+
+export interface IElementEffect {
+    readonly type: EffectType;
+    readonly target: number;
+}
+
+export class TransformEffect implements IElementEffect {
+    readonly type: EffectType = EffectType.TRANSFORM;
+    readonly target: number = EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT;
+
+    constructor(
+        readonly offsetX: number,
+        readonly offsetY: number,
+        readonly matrix: Matrix
+    ) {}
+}
+
+export class ClipEffect implements IElementEffect {
+    readonly type: EffectType = EffectType.CLIP;
+
+    constructor(
+        readonly path: Path[],
+        readonly target: EffectTarget
+    ) {}
+}
+
+export class OpacityEffect implements IElementEffect {
+    readonly type: EffectType = EffectType.OPACITY;
+    readonly target: number = EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT;
+
+    constructor(readonly opacity: number) {}
+}
+
+/**
+ * Clips the element and all its descendants to an arbitrary canvas-drawn shape.
+ * The `applyClip` callback is responsible for calling beginPath, the shape
+ * operations, and ctx.clip() — giving each shape type full control over how
+ * the path is constructed (arc, ellipse, lineTo, Path2D, etc.).
+ */
+export class ClipPathEffect implements IElementEffect {
+    readonly type: EffectType = EffectType.CLIP_PATH;
+    readonly target: number = EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT;
+
+    constructor(readonly applyClip: (ctx: CanvasRenderingContext2D) => void) {}
+}
+
+export class BlendEffect implements IElementEffect {
+    readonly type: EffectType = EffectType.BLEND;
+    readonly target: number = EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT;
+
+    constructor(readonly compositeOperation: GlobalCompositeOperation) {}
+}
+
+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;
+export const isClipPathEffect = (effect: IElementEffect): effect is ClipPathEffect =>
+    effect.type === EffectType.CLIP_PATH;
+export const isBlendEffect = (effect: IElementEffect): effect is BlendEffect => effect.type === EffectType.BLEND;

package/src/render/font-metrics.ts

@@ -0,0 +1,72 @@
+import { SMALL_IMAGE } from '../core/util';
+export interface FontMetric {
+    baseline: number;
+    middle: number;
+}
+
+const SAMPLE_TEXT = 'Hidden Text';
+
+export class FontMetrics {
+    private readonly _data: { [key: string]: FontMetric };
+    private readonly _document: Document;
+
+    constructor(document: Document) {
+        this._data = {};
+        this._document = document;
+    }
+
+    private parseMetrics(fontFamily: string, fontSize: string): FontMetric {
+        const container = this._document.createElement('div');
+        const img = this._document.createElement('img');
+        const span = this._document.createElement('span');
+
+        const body = this._document.body as HTMLBodyElement;
+
+        container.style.visibility = 'hidden';
+        container.style.fontFamily = fontFamily;
+        container.style.fontSize = fontSize;
+        container.style.margin = '0';
+        container.style.padding = '0';
+        container.style.whiteSpace = 'nowrap';
+
+        body.appendChild(container);
+
+        img.src = SMALL_IMAGE;
+        img.width = 1;
+        img.height = 1;
+
+        img.style.margin = '0';
+        img.style.padding = '0';
+        img.style.verticalAlign = 'baseline';
+
+        span.style.fontFamily = fontFamily;
+        span.style.fontSize = fontSize;
+        span.style.margin = '0';
+        span.style.padding = '0';
+
+        span.appendChild(this._document.createTextNode(SAMPLE_TEXT));
+        container.appendChild(span);
+        container.appendChild(img);
+        const baseline = img.offsetTop - span.offsetTop + 2;
+
+        container.removeChild(span);
+        container.appendChild(this._document.createTextNode(SAMPLE_TEXT));
+
+        container.style.lineHeight = 'normal';
+        img.style.verticalAlign = 'super';
+
+        const middle = img.offsetTop - container.offsetTop + 2;
+
+        body.removeChild(container);
+
+        return { baseline, middle };
+    }
+    getMetrics(fontFamily: string, fontSize: string): FontMetric {
+        const key = `${fontFamily} ${fontSize}`;
+        if (typeof this._data[key] === 'undefined') {
+            this._data[key] = this.parseMetrics(fontFamily, fontSize);
+        }
+
+        return this._data[key];
+    }
+}

package/src/render/object-fit.ts

@@ -0,0 +1,100 @@
+import { OBJECT_FIT, ObjectFit } from '../css/property-descriptors/object-fit';
+
+export interface ObjectFitBox {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+
+export interface ObjectFitRendering {
+    sx: number;
+    sy: number;
+    sw: number;
+    sh: number;
+    dx: number;
+    dy: number;
+    dw: number;
+    dh: number;
+}
+
+export const calculateObjectFitRendering = (
+    intrinsicWidth: number,
+    intrinsicHeight: number,
+    box: ObjectFitBox,
+    objectFit: ObjectFit
+): ObjectFitRendering => {
+    let sx = 0;
+    let sy = 0;
+    let sw = intrinsicWidth;
+    let sh = intrinsicHeight;
+    let dx = box.left;
+    let dy = box.top;
+    let dw = box.width;
+    let dh = box.height;
+
+    const boxRatio = dw / dh;
+    const imgRatio = sw / sh;
+
+    if (objectFit === OBJECT_FIT.CONTAIN) {
+        if (imgRatio > boxRatio) {
+            dh = dw / imgRatio;
+            dy += (box.height - dh) / 2;
+        } else {
+            dw = dh * imgRatio;
+            dx += (box.width - dw) / 2;
+        }
+    } else if (objectFit === OBJECT_FIT.COVER) {
+        if (imgRatio > boxRatio) {
+            sw = sh * boxRatio;
+            sx += (intrinsicWidth - sw) / 2;
+        } else {
+            sh = sw / boxRatio;
+            sy += (intrinsicHeight - sh) / 2;
+        }
+    } else if (objectFit === OBJECT_FIT.NONE) {
+        if (sw > dw) {
+            sx += (sw - dw) / 2;
+            sw = dw;
+        } else {
+            dx += (dw - sw) / 2;
+            dw = sw;
+        }
+        if (sh > dh) {
+            sy += (sh - dh) / 2;
+            sh = dh;
+        } else {
+            dy += (dh - sh) / 2;
+            dh = sh;
+        }
+    } else if (objectFit === OBJECT_FIT.SCALE_DOWN) {
+        const containW = imgRatio > boxRatio ? dw : dh * imgRatio;
+        const noneW = sw > dw ? sw : dw;
+        if (containW < noneW) {
+            if (imgRatio > boxRatio) {
+                dh = dw / imgRatio;
+                dy += (box.height - dh) / 2;
+            } else {
+                dw = dh * imgRatio;
+                dx += (box.width - dw) / 2;
+            }
+        } else {
+            if (sw > dw) {
+                sx += (sw - dw) / 2;
+                sw = dw;
+            } else {
+                dx += (dw - sw) / 2;
+                dw = sw;
+            }
+            if (sh > dh) {
+                sy += (sh - dh) / 2;
+                sh = dh;
+            } else {
+                dy += (dh - sh) / 2;
+                dh = sh;
+            }
+        }
+    }
+
+    return { sx, sy, sw, sh, dx, dy, dw, dh };
+};

package/src/render/path.ts

@@ -0,0 +1,37 @@
+import { BezierCurve } from './bezier-curve';
+import { Vector } from './vector';
+export const enum PathType {
+    VECTOR = 0,
+    BEZIER_CURVE = 1
+}
+
+export interface IPath {
+    type: PathType;
+    add(deltaX: number, deltaY: number): IPath;
+}
+
+export const equalPath = (a: Path[], b: Path[]): boolean => {
+    if (a.length === b.length) {
+        return a.some((v, i) => v === b[i]);
+    }
+
+    return false;
+};
+
+export const transformPath = (path: Path[], deltaX: number, deltaY: number, deltaW: number, deltaH: number): Path[] => {
+    return path.map((point, index) => {
+        switch (index) {
+            case 0:
+                return point.add(deltaX, deltaY);
+            case 1:
+                return point.add(deltaX + deltaW, deltaY);
+            case 2:
+                return point.add(deltaX + deltaW, deltaY + deltaH);
+            case 3:
+                return point.add(deltaX, deltaY + deltaH);
+        }
+        return point;
+    });
+};
+
+export type Path = Vector | BezierCurve;

package/src/render/renderer-interface.ts

@@ -0,0 +1,28 @@
+/**
+ * Base interface for all specialized renderers
+ * Each renderer is responsible for rendering a specific aspect of an element
+ */
+export interface IRenderer {
+    /**
+     * Render the specified aspect of the element
+     */
+    render(...args: any[]): void | Promise<void>;
+}
+
+/**
+ * Common dependencies required by renderers
+ */
+export interface RendererDependencies {
+    ctx: CanvasRenderingContext2D;
+    scale: number;
+    options: any; // Will be typed more specifically
+}
+
+/**
+ * Performance tracking for renderers
+ */
+export interface RenderMetrics {
+    renderCount: number;
+    totalTime: number;
+    averageTime: number;
+}