html2canvas-pro 2.2.3 → 2.2.4

package/dist/html2canvas-pro.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
 */
@@ -8450,20 +8450,124 @@
 			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;