html2canvas-pro 2.2.0 → 2.2.2

package/README.md

@@ -5,32 +5,32 @@
 html2canvas-pro
 </h1>
 <p align="center">
-Next generation JavaScript screenshots tool.
-<p>
+Next generation JavaScript screenshot tool.
+</p>
 <p align="center">
   <a href="https://github.com/yorickshan/html2canvas-pro/actions/workflows/ci.yml"><img src="https://github.com/yorickshan/html2canvas-pro/actions/workflows/ci.yml/badge.svg?branch=main" alt="build status"></a>
-  <a href=https://npm.im/html2canvas-pro><img src="https://badgen.net/npm/v/html2canvas-pro" alt="npm version"></a>
-  <a href=http://npm.im/html2canvas-pro><img src="https://badgen.net/npm/dm/html2canvas-pro" alt="npm downloads"></a>
+	  <a href="https://npm.im/html2canvas-pro"><img src="https://badgen.net/npm/v/html2canvas-pro" alt="npm version"></a>
+	  <a href="http://npm.im/html2canvas-pro"><img src="https://badgen.net/npm/dm/html2canvas-pro" alt="npm downloads"></a>
   <a href="https://www.jsdelivr.com/package/npm/html2canvas-pro"><img src="https://data.jsdelivr.com/v1/package/npm/html2canvas-pro/badge" /></a>
-<p>
+  <a href="https://deepwiki.com/yorickshan/html2canvas-pro"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a>
+</p>
 <p align="center">
   <a href="https://yorickshan.github.io/html2canvas-pro/getting-started.html">Getting Started</a>
-  | <a href="https://deepwiki.com/yorickshan/html2canvas-pro">DeepWiki</a>
 </p>
 <br>
 
 ## Why html2canvas-pro?
 
-html2canvas-pro is a fork of [niklasvh/html2canvas](https://github.com/niklasvh/html2canvas) that includes various fixes and new features. It offers several advantages over the original html2canvas, such as:
-- support color function ```color()``` (including relative colors)
-- support color function ```lab()``` / ```lch()``` / ```oklab()``` / ```oklch()```
-- Support object-fit of ```<img/>```
-- Support CSS ```clip-path``` (inset, circle, ellipse, polygon, path)
-- Support CSS ```writing-mode``` (horizontal-tb, vertical-rl, vertical-lr)
-- **Image smoothing control** - Support CSS `image-rendering` property and `imageSmoothing`/`imageSmoothingQuality` options
-- **Security validation** - Built-in input validation (XSS/SSRF protection)
-- **Performance monitoring** - Built-in performance measurement API
-- Fixed some [issues](./CHANGELOG.md)
+html2canvas-pro is a fork of [niklasvh/html2canvas](https://github.com/niklasvh/html2canvas) that includes various fixes and new features. It offers several advantages over the original html2canvas:
+- Color function `color()` (including relative colors)
+- Color functions `lab()` / `lch()` / `oklab()` / `oklch()`
+- `object-fit` support for `<img/>`
+- CSS `clip-path` support (inset, circle, ellipse, polygon, path)
+- CSS `writing-mode` support (horizontal-tb, vertical-rl, vertical-lr)
+- **Image smoothing control** — CSS `image-rendering` property and `imageSmoothing`/`imageSmoothingQuality` options
+- **Security validation** — Built-in input validation (XSS/SSRF protection)
+- **Performance monitoring** — Built-in performance measurement API
+- Various bug fixes from the [changelog](./CHANGELOG.md)
 
 If you found this helpful, don't forget to
 leave a star 🌟.
@@ -78,10 +78,10 @@ See the [Configuration Guide](/docs/configuration.md#canvas-dimensions) for more
 
 ## Contribution
 
-If you want to add some features, feel free to submit PR.
+If you'd like to add a feature, feel free to submit a PR.
 
-If you want to become a maintainer on it, please contact me.
+Interested in becoming a maintainer? Open an [issue](https://github.com/yorickshan/html2canvas-pro/issues) or reach out to [@yorickshan](https://github.com/yorickshan).
 
 ## License
 
-[MIT](LICENSE).
+[MIT](LICENSE)

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.2.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.2.2 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -6294,11 +6294,13 @@ const parse = (context, descriptor, style) => {
 		valueCache = /* @__PURE__ */ new Map();
 		parseCache.set(descriptor, valueCache);
 	}
-	if (valueCache.size >= 200) {
-		const oldestKey = valueCache.keys().next().value;
-		valueCache.delete(oldestKey);
+	if (!(descriptor.type === 3 && descriptor.format === "image")) {
+		if (valueCache.size >= 200) {
+			const oldestKey = valueCache.keys().next().value;
+			valueCache.delete(oldestKey);
+		}
+		valueCache.set(rawValue, result);
 	}
-	valueCache.set(rawValue, result);
 	return result;
 };
 //#endregion
@@ -8440,9 +8442,18 @@ var BlendEffect = class {
 };
 var FilterEffect = class {
 	constructor(filterString) {
-		this.filterString = 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 isTransformEffect = (effect) => effect.type === 0;
@@ -9897,7 +9908,15 @@ var EffectsRenderer = class {
 			this.ctx.clip();
 		} else if (isClipPathEffect(effect)) effect.applyClip(this.ctx);
 		else if (isBlendEffect(effect)) this.ctx.globalCompositeOperation = effect.compositeOperation;
-		else if (isFilterEffect(effect)) this.ctx.filter = effect.filterString;
+		else if (isFilterEffect(effect)) {
+			this.ctx.filter = effect.safeFilterString || "none";
+			if (effect.shadow) {
+				this.ctx.shadowOffsetX = effect.shadow.offsetX;
+				this.ctx.shadowOffsetY = effect.shadow.offsetY;
+				this.ctx.shadowBlur = effect.shadow.blur;
+				this.ctx.shadowColor = effect.shadow.color;
+			}
+		}
 		this.activeEffects.push(effect);
 	}
 	/**
@@ -10714,7 +10733,8 @@ const renderElement = async (element, opts, config) => {
 		imageTimeout: opts.imageTimeout ?? 15e3,
 		proxy: opts.proxy,
 		useCORS: opts.useCORS ?? false,
-		customIsSameOrigin: opts.customIsSameOrigin
+		customIsSameOrigin: opts.customIsSameOrigin,
+		maxCacheSize: opts.maxCacheSize
 	};
 	const contextOptions = {
 		logging: opts.logging ?? true,