@ohos-ports/html2canvas-pro 0.0.0-stage → 2.3.2-beta.0

package/dist/lib/render/effects.js

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFilterEffect = exports.isBlendEffect = exports.isClipPathEffect = exports.isOpacityEffect = exports.isClipEffect = exports.isTransformEffect = exports.FilterEffect = exports.BlendEffect = exports.ClipPathEffect = exports.OpacityEffect = exports.ClipEffect = exports.TransformEffect = void 0;
+const mix_blend_mode_1 = require("../css/property-descriptors/mix-blend-mode");
+class TransformEffect {
+    constructor(offsetX, offsetY, matrix) {
+        this.offsetX = offsetX;
+        this.offsetY = offsetY;
+        this.matrix = matrix;
+        this.type = 0 /* EffectType.TRANSFORM */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+    }
+}
+exports.TransformEffect = TransformEffect;
+class ClipEffect {
+    constructor(path, target) {
+        this.path = path;
+        this.target = target;
+        this.type = 1 /* EffectType.CLIP */;
+    }
+}
+exports.ClipEffect = ClipEffect;
+class OpacityEffect {
+    constructor(opacity) {
+        this.opacity = opacity;
+        this.type = 2 /* EffectType.OPACITY */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+    }
+}
+exports.OpacityEffect = OpacityEffect;
+/**
+ * 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.).
+ */
+class ClipPathEffect {
+    constructor(applyClip) {
+        this.applyClip = applyClip;
+        this.type = 3 /* EffectType.CLIP_PATH */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+    }
+}
+exports.ClipPathEffect = ClipPathEffect;
+/**
+ * Maps a CSS mix-blend-mode value to the corresponding Canvas {@link GlobalCompositeOperation}.
+ * All CSS blend mode values are supported by the Canvas 2D API except 'normal',
+ * which maps to the default 'source-over'.
+ */
+const MIX_BLEND_MODE_TO_COMPOSITE = {
+    [mix_blend_mode_1.MIX_BLEND_MODE.NORMAL]: 'source-over',
+    [mix_blend_mode_1.MIX_BLEND_MODE.MULTIPLY]: 'multiply',
+    [mix_blend_mode_1.MIX_BLEND_MODE.SCREEN]: 'screen',
+    [mix_blend_mode_1.MIX_BLEND_MODE.OVERLAY]: 'overlay',
+    [mix_blend_mode_1.MIX_BLEND_MODE.DARKEN]: 'darken',
+    [mix_blend_mode_1.MIX_BLEND_MODE.LIGHTEN]: 'lighten',
+    [mix_blend_mode_1.MIX_BLEND_MODE.COLOR_DODGE]: 'color-dodge',
+    [mix_blend_mode_1.MIX_BLEND_MODE.COLOR_BURN]: 'color-burn',
+    [mix_blend_mode_1.MIX_BLEND_MODE.HARD_LIGHT]: 'hard-light',
+    [mix_blend_mode_1.MIX_BLEND_MODE.SOFT_LIGHT]: 'soft-light',
+    [mix_blend_mode_1.MIX_BLEND_MODE.DIFFERENCE]: 'difference',
+    [mix_blend_mode_1.MIX_BLEND_MODE.EXCLUSION]: 'exclusion',
+    [mix_blend_mode_1.MIX_BLEND_MODE.HUE]: 'hue',
+    [mix_blend_mode_1.MIX_BLEND_MODE.SATURATION]: 'saturation',
+    [mix_blend_mode_1.MIX_BLEND_MODE.COLOR]: 'color',
+    [mix_blend_mode_1.MIX_BLEND_MODE.LUMINOSITY]: 'luminosity'
+};
+class BlendEffect {
+    constructor(mixBlendMode) {
+        this.mixBlendMode = mixBlendMode;
+        this.type = 4 /* EffectType.BLEND */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+        this.compositeOperation = MIX_BLEND_MODE_TO_COMPOSITE[mixBlendMode];
+    }
+}
+exports.BlendEffect = BlendEffect;
+class FilterEffect {
+    constructor(filterString) {
+        this.type = 5 /* EffectType.FILTER */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+        const parsed = FilterEffect.parseDropShadow(filterString);
+        this.shadow = parsed.shadow;
+        this.safeFilterString = parsed.safeFilterString;
+    }
+    /**
+     * Parse a CSS filter string, extracting drop-shadow() parameters for
+     * rendering via ctx.shadow* (which avoids canvas taint), and producing
+     * a safe filter string with all drop-shadow() calls removed.
+     *
+     * Uses paren-depth tracking to correctly handle nested function
+     * arguments — e.g. rgba() / hsla() inside drop-shadow() — which
+     * the previous regex-based approach ([^)]+) could not handle.
+     *
+     * Per CSS spec the shadow value is: <color>? && <length>{2,3}
+     * (components can appear in any order).
+     */
+    static parseDropShadow(filterString) {
+        if (!filterString) {
+            return { safeFilterString: '' };
+        }
+        const matches = FilterEffect.findDropShadows(filterString);
+        if (matches.length === 0) {
+            return { safeFilterString: filterString };
+        }
+        // Parse the first drop-shadow body to extract shadow params
+        const shadow = FilterEffect.parseDropShadowBody(matches[0].body);
+        // Build safe filter string by removing ALL drop-shadow() occurrences
+        let result = '';
+        let lastEnd = 0;
+        for (const m of matches) {
+            result += filterString.slice(lastEnd, m.start);
+            lastEnd = m.end;
+        }
+        result += filterString.slice(lastEnd);
+        return {
+            shadow,
+            safeFilterString: result.replace(/\s+/g, ' ').trim()
+        };
+    }
+    /**
+     * Find all drop-shadow() function calls in a CSS filter string.
+     * Uses paren-depth tracking to correctly skip over nested
+     * parentheses (e.g. rgba(0, 0, 0, 0.15)).
+     */
+    static findDropShadows(str) {
+        const results = [];
+        const re = /drop-shadow\(/gi;
+        let m;
+        while ((m = re.exec(str)) !== null) {
+            const openParen = m.index + 'drop-shadow('.length - 1; // position of '('
+            const start = m.index;
+            let depth = 1;
+            let pos = openParen + 1;
+            while (pos < str.length && depth > 0) {
+                const ch = str[pos];
+                if (ch === '(')
+                    depth++;
+                else if (ch === ')')
+                    depth--;
+                pos++;
+            }
+            if (depth !== 0)
+                break; // malformed — stop scanning
+            const body = str.slice(openParen + 1, pos - 1);
+            results.push({ body, start, end: pos });
+        }
+        return results;
+    }
+    /**
+     * Parse the body of a single drop-shadow() function.
+     * Body format (order-independent): <offsetX> <offsetY> [<blur>] [<color>?]
+     */
+    static parseDropShadowBody(body) {
+        const tokens = FilterEffect.tokenizeFilterArgs(body.trim());
+        const lengths = [];
+        let color;
+        for (const token of tokens) {
+            if (FilterEffect.isCSSLength(token)) {
+                lengths.push(parseFloat(token));
+            }
+            else if (token) {
+                color = token;
+            }
+        }
+        if (lengths.length < 2 || lengths.length > 3) {
+            return undefined;
+        }
+        return {
+            offsetX: lengths[0],
+            offsetY: lengths[1],
+            blur: lengths[2] ?? 0,
+            color: color ?? 'rgba(0,0,0,1)'
+        };
+    }
+    /**
+     * Split whitespace-separated tokens while keeping parenthesised
+     * expressions intact.
+     *
+     * e.g. "rgba(0, 0, 0, 0.15) 0px 1px 2px"
+     *   → ["rgba(0, 0, 0, 0.15)", "0px", "1px", "2px"]
+     */
+    static tokenizeFilterArgs(str) {
+        const tokens = [];
+        let current = '';
+        let depth = 0;
+        for (let i = 0; i < str.length; i++) {
+            const ch = str[i];
+            if (ch === '(') {
+                depth++;
+                current += ch;
+            }
+            else if (ch === ')') {
+                depth--;
+                current += ch;
+            }
+            else if (/\s/.test(ch)) {
+                if (depth > 0) {
+                    current += ch;
+                }
+                else if (current) {
+                    tokens.push(current);
+                    current = '';
+                }
+            }
+            else {
+                current += ch;
+            }
+        }
+        if (current) {
+            tokens.push(current);
+        }
+        return tokens;
+    }
+    /** True when token looks like a CSS length: number with optional unit. */
+    static isCSSLength(token) {
+        return /^-?[\d.]+(px|em|rem|pt|cm|mm|in|pc|ex|ch|vw|vh|vmin|vmax|%)?$/i.test(token);
+    }
+}
+exports.FilterEffect = FilterEffect;
+const isTransformEffect = (effect) => effect.type === 0 /* EffectType.TRANSFORM */;
+exports.isTransformEffect = isTransformEffect;
+const isClipEffect = (effect) => effect.type === 1 /* EffectType.CLIP */;
+exports.isClipEffect = isClipEffect;
+const isOpacityEffect = (effect) => effect.type === 2 /* EffectType.OPACITY */;
+exports.isOpacityEffect = isOpacityEffect;
+const isClipPathEffect = (effect) => effect.type === 3 /* EffectType.CLIP_PATH */;
+exports.isClipPathEffect = isClipPathEffect;
+const isBlendEffect = (effect) => effect.type === 4 /* EffectType.BLEND */;
+exports.isBlendEffect = isBlendEffect;
+const isFilterEffect = (effect) => effect.type === 5 /* EffectType.FILTER */;
+exports.isFilterEffect = isFilterEffect;

package/dist/lib/render/font-metrics.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontMetrics = void 0;
+const util_1 = require("../core/util");
+const SAMPLE_TEXT = 'Hidden Text';
+class FontMetrics {
+    constructor(document) {
+        this._data = {};
+        this._document = document;
+    }
+    parseMetrics(fontFamily, fontSize) {
+        const container = this._document.createElement('div');
+        const img = this._document.createElement('img');
+        const span = this._document.createElement('span');
+        const body = this._document.body;
+        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 = util_1.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, fontSize) {
+        const key = `${fontFamily} ${fontSize}`;
+        if (typeof this._data[key] === 'undefined') {
+            this._data[key] = this.parseMetrics(fontFamily, fontSize);
+        }
+        return this._data[key];
+    }
+}
+exports.FontMetrics = FontMetrics;

package/dist/lib/render/object-fit.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateObjectFitRendering = void 0;
+const length_percentage_1 = require("../css/types/length-percentage");
+const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objectFit, objectPosition) => {
+    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;
+    // Resolve object-position offsets (default: 50% 50% = center)
+    const posX = objectPosition ? (0, length_percentage_1.getAbsoluteValue)(objectPosition[0], 1) : 0.5;
+    const posY = objectPosition ? (0, length_percentage_1.getAbsoluteValue)(objectPosition[1], 1) : 0.5;
+    if (objectFit === 2 /* OBJECT_FIT.CONTAIN */) {
+        if (imgRatio > boxRatio) {
+            dh = dw / imgRatio;
+            dy += (box.height - dh) * posY;
+        }
+        else {
+            dw = dh * imgRatio;
+            dx += (box.width - dw) * posX;
+        }
+    }
+    else if (objectFit === 4 /* OBJECT_FIT.COVER */) {
+        if (imgRatio > boxRatio) {
+            sw = sh * boxRatio;
+            sx += (intrinsicWidth - sw) * posX;
+        }
+        else {
+            sh = sw / boxRatio;
+            sy += (intrinsicHeight - sh) * posY;
+        }
+    }
+    else if (objectFit === 8 /* OBJECT_FIT.NONE */) {
+        if (sw > dw) {
+            sx += (sw - dw) * posX;
+            sw = dw;
+        }
+        else {
+            dx += (dw - sw) * posX;
+            dw = sw;
+        }
+        if (sh > dh) {
+            sy += (sh - dh) * posY;
+            sh = dh;
+        }
+        else {
+            dy += (dh - sh) * posY;
+            dh = sh;
+        }
+    }
+    else if (objectFit === 16 /* 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) * posY;
+            }
+            else {
+                dw = dh * imgRatio;
+                dx += (box.width - dw) * posX;
+            }
+        }
+        else {
+            if (sw > dw) {
+                sx += (sw - dw) * posX;
+                sw = dw;
+            }
+            else {
+                dx += (dw - sw) * posX;
+                dw = sw;
+            }
+            if (sh > dh) {
+                sy += (sh - dh) * posY;
+                sh = dh;
+            }
+            else {
+                dy += (dh - sh) * posY;
+                dh = sh;
+            }
+        }
+    }
+    return { sx, sy, sw, sh, dx, dy, dw, dh };
+};
+exports.calculateObjectFitRendering = calculateObjectFitRendering;

package/dist/lib/render/path.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformPath = exports.equalPath = void 0;
+const equalPath = (a, b) => {
+    if (a.length === b.length) {
+        return a.some((v, i) => v === b[i]);
+    }
+    return false;
+};
+exports.equalPath = equalPath;
+const transformPath = (path, deltaX, deltaY, deltaW, deltaH) => {
+    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;
+    });
+};
+exports.transformPath = transformPath;

package/dist/lib/render/renderer-interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });