html2canvas-pro 2.2.3 → 2.2.4

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.2.3 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.2.4 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -8443,20 +8443,124 @@ var BlendEffect = class {
 		this.compositeOperation = MIX_BLEND_MODE_TO_COMPOSITE[mixBlendMode];
 	}
 };
-var FilterEffect = class {
+var FilterEffect = class FilterEffect {
 	constructor(filterString) {
 		this.type = 5;
 		this.target = 6;
-		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();
-		} else this.safeFilterString = filterString;
+		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 };
+		const shadow = FilterEffect.parseDropShadowBody(matches[0].body);
+		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 + 12 - 1;
+			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;
+			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;
+		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);
 	}
 };
 const isTransformEffect = (effect) => effect.type === 0;