html2canvas-pro 2.2.2 → 2.2.4

package/dist/lib/css/index.js

@@ -310,10 +310,15 @@ const parse = (context, descriptor, style) => {
         valueCache = new Map();
         parseCache.set(descriptor, valueCache);
     }
-    // Skip caching for image descriptors — their parse() has the critical
-    // side effect of calling context.cache.addImage(url) which must run
-    // on every render pass (different cache instances per html2canvas call).
-    const skipCache = descriptor.type === 3 /* PropertyDescriptorParsingType.TYPE_VALUE */ && descriptor.format === 'image';
+    // Skip caching for descriptors whose parse() has the critical side effect
+    // of calling context.cache.addImage() which must run on every render pass
+    // (different cache instances per html2canvas call). Two paths:
+    // 1. Per-descriptor skipCache flag (backgroundImage, listStyleImage,
+    //    borderImageSource — all call image.parse() internally).
+    // 2. TYPE_VALUE + format 'image' — the image type descriptor itself,
+    //    which calls addImage() directly.
+    const skipCache = descriptor.skipCache ||
+        (descriptor.type === 3 /* PropertyDescriptorParsingType.TYPE_VALUE */ && descriptor.format === 'image');
     if (!skipCache) {
         if (valueCache.size >= constants_1.PARSE_CACHE_MAX_PER_DESCRIPTOR) {
             const oldestKey = valueCache.keys().next().value;

package/dist/lib/css/property-descriptors/background-image.js

@@ -8,6 +8,7 @@ exports.backgroundImage = {
     initialValue: 'none',
     type: 1 /* PropertyDescriptorParsingType.LIST */,
     prefix: false,
+    skipCache: true,
     parse: (context, tokens) => {
         if (tokens.length === 0) {
             return [];

package/dist/lib/css/property-descriptors/border-image-source.js

@@ -8,6 +8,7 @@ exports.borderImageSource = {
     initialValue: 'none',
     prefix: false,
     type: 1 /* PropertyDescriptorParsingType.LIST */,
+    skipCache: true,
     parse: (context, tokens) => {
         if (tokens.length === 0) {
             return null;

package/dist/lib/css/property-descriptors/list-style-image.js

@@ -7,6 +7,7 @@ exports.listStyleImage = {
     initialValue: 'none',
     type: 0 /* PropertyDescriptorParsingType.VALUE */,
     prefix: false,
+    skipCache: true,
     parse: (context, token) => {
         if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
             return null;

package/dist/lib/render/effects.js

@@ -78,21 +78,142 @@ class FilterEffect {
     constructor(filterString) {
         this.type = 5 /* EffectType.FILTER */;
         this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
-        // Parse drop-shadow(...) out of the filter string so we can render it
-        // via ctx.shadow* instead of ctx.filter (which taints the canvas).
-        const dropShadowMatch = filterString.match(/drop-shadow\(\s*([\d.-]+)(px)?\s+([\d.-]+)(px)?\s+([\d.-]+)(px)?\s+(.+?)\s*\)/);
-        if (dropShadowMatch) {
-            this.shadow = {
-                offsetX: parseFloat(dropShadowMatch[1]),
-                offsetY: parseFloat(dropShadowMatch[3]),
-                blur: parseFloat(dropShadowMatch[5]),
-                color: dropShadowMatch[7].trim()
-            };
-            this.safeFilterString = filterString.replace(/drop-shadow\([^)]+\)\s*/g, '').trim();
+        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;
         }
-        else {
-            this.safeFilterString = filterString;
+        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;

package/dist/types/css/property-descriptor.d.ts

@@ -13,6 +13,10 @@ export interface IPropertyDescriptor {
     type: PropertyDescriptorParsingType;
     initialValue: string;
     prefix: boolean;
+    /** When true, the parse result is never stored in parseCache.
+     *  Set this for descriptors whose parse() has side effects (e.g.,
+     *  calling context.cache.addImage) that must run on every render pass. */
+    skipCache?: boolean;
 }
 export interface IPropertyIdentValueDescriptor<T> extends IPropertyDescriptor {
     type: PropertyDescriptorParsingType.IDENT_VALUE;

package/dist/types/render/effects.d.ts

@@ -61,7 +61,7 @@ export declare class FilterEffect implements IElementEffect {
     readonly target: number;
     /** CSS filter string with drop-shadow() stripped (safe for ctx.filter). */
     readonly safeFilterString: string;
-    /** Shadow params for drop-shadow(), if present. */
+    /** Shadow params for drop-shadow(), if present and successfully parsed. */
     readonly shadow?: {
         offsetX: number;
         offsetY: number;
@@ -69,6 +69,40 @@ export declare class FilterEffect implements IElementEffect {
         color: string;
     };
     constructor(filterString: string);
+    /**
+     * 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).
+     */
+    private static parseDropShadow;
+    /**
+     * 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)).
+     */
+    private static findDropShadows;
+    /**
+     * Parse the body of a single drop-shadow() function.
+     * Body format (order-independent): <offsetX> <offsetY> [<blur>] [<color>?]
+     */
+    private static parseDropShadowBody;
+    /**
+     * 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"]
+     */
+    private static tokenizeFilterArgs;
+    /** True when token looks like a CSS length: number with optional unit. */
+    private static isCSSLength;
 }
 export declare const isTransformEffect: (effect: IElementEffect) => effect is TransformEffect;
 export declare const isClipEffect: (effect: IElementEffect) => effect is ClipEffect;

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.2.2",
+  "version": "2.2.4",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",