html2canvas-pro 2.2.1 → 2.2.3

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/canvas/effects-renderer.js

@@ -67,14 +67,17 @@ class EffectsRenderer {
             this.ctx.globalCompositeOperation = effect.compositeOperation;
         }
         else if ((0, effects_1.isFilterEffect)(effect)) {
-            // Canvas 2D `ctx.filter` accepts CSS filter strings including
-            // drop-shadow(). However, using drop-shadow() on the canvas context
-            // can taint the canvas in some browsers (Chrome, Firefox) even for
-            // same-origin content.  Our filter parser wraps shadows with
-            // drop-shadow(...) — strip that single function so we never set
-            // a filter that could taint the canvas.
-            const safe = effect.filterString.replace(/drop-shadow\([^)]+\)\s*/g, '').trim();
-            this.ctx.filter = safe || 'none';
+            // Apply all filters except drop-shadow() via ctx.filter.
+            // drop-shadow() is rendered separately through ctx.shadow*
+            // because ctx.filter="drop-shadow(...)" taints the canvas
+            // even for same-origin content (Chrome, Firefox).
+            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);
     }

package/dist/lib/render/effects.js

@@ -76,9 +76,23 @@ class BlendEffect {
 exports.BlendEffect = BlendEffect;
 class FilterEffect {
     constructor(filterString) {
-        this.filterString = 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();
+        }
+        else {
+            this.safeFilterString = filterString;
+        }
     }
 }
 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

@@ -57,9 +57,17 @@ export declare class BlendEffect implements IElementEffect {
     constructor(mixBlendMode: MixBlendMode);
 }
 export declare class FilterEffect implements IElementEffect {
-    readonly filterString: string;
     readonly type: EffectType;
     readonly target: number;
+    /** CSS filter string with drop-shadow() stripped (safe for ctx.filter). */
+    readonly safeFilterString: string;
+    /** Shadow params for drop-shadow(), if present. */
+    readonly shadow?: {
+        offsetX: number;
+        offsetY: number;
+        blur: number;
+        color: string;
+    };
     constructor(filterString: string);
 }
 export declare const isTransformEffect: (effect: IElementEffect) => effect is TransformEffect;

package/package.json

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