html2canvas-pro 2.4.3 → 2.4.4

package/dist/lib/render/canvas/surface-bounds.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_SURFACE_SIDE = exports.MAX_SURFACE_PIXELS = void 0;
+exports.reserveSurface = reserveSurface;
+exports.surfaceBounds = surfaceBounds;
+exports.cropSurface = cropSurface;
+const bounds_1 = require("../../css/layout/bounds");
+const length_percentage_1 = require("../../css/types/length-percentage");
+const filter_surface_1 = require("./filter-surface");
+// Budget backing stores across all active nested surfaces in one capture.
+// Reserve source, filtered output and decoded SVG/PNG rasters conservatively.
+// Browser encoder/decoder overhead and the caller's output canvas are separate.
+exports.MAX_SURFACE_PIXELS = 16 * 1024 * 1024;
+exports.MAX_SURFACE_SIDE = 8192;
+function reserveSurface(budget, width, height) {
+    const pixels = width * height * 4;
+    if (!Number.isFinite(pixels) ||
+        width <= 0 ||
+        height <= 0 ||
+        width > exports.MAX_SURFACE_SIDE ||
+        height > exports.MAX_SURFACE_SIDE ||
+        budget.pixels + pixels > exports.MAX_SURFACE_PIXELS)
+        return 0;
+    budget.pixels += pixels;
+    return pixels;
+}
+const expand = (b, margin) => b.add(-margin, -margin, margin * 2, margin * 2);
+const union = (a, b) => new bounds_1.Bounds(Math.min(a.left, b.left), Math.min(a.top, b.top), Math.max(a.left + a.width, b.left + b.width) - Math.min(a.left, b.left), Math.max(a.top + a.height, b.top + b.height) - Math.min(a.top, b.top));
+// Conservative paint bounds for the untransformed subtree supported by this path.
+// Include overflow descendants, text ink padding, box/text shadows and nested filters.
+function surfaceBounds(container) {
+    const styles = container.styles;
+    let bounds = container.bounds;
+    for (const shadow of styles.boxShadow) {
+        if (!shadow.inset) {
+            const spread = Math.max(0, shadow.spread.number) + 3 * shadow.blur.number;
+            bounds = union(bounds, expand(container.bounds.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), spread));
+        }
+    }
+    for (const text of container.textNodes) {
+        for (const part of text.textBounds) {
+            const ink = expand(part.bounds, 2 * (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, container.bounds.height) + styles.webkitTextStrokeWidth);
+            bounds = union(bounds, ink);
+            for (const shadow of styles.textShadow) {
+                bounds = union(bounds, expand(ink.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), 3 * shadow.blur.number));
+            }
+        }
+    }
+    for (const child of container.elements) {
+        if (child.styles.isVisible())
+            bounds = union(bounds, surfaceBounds(child));
+    }
+    const filter = (0, filter_surface_1.parseSimpleFilter)(styles.filter);
+    return expand(bounds, filter ? (0, filter_surface_1.filterOutset)(filter) : 0);
+}
+function cropSurface(bounds, viewport, margin, scale) {
+    // Pixels just outside the destination still contribute through blur/shadow.
+    const area = expand(viewport, margin);
+    const left = Math.floor(Math.max(bounds.left, area.left) * scale) / scale;
+    const top = Math.floor(Math.max(bounds.top, area.top) * scale) / scale;
+    const right = Math.ceil(Math.min(bounds.left + bounds.width, area.left + area.width) * scale) / scale;
+    const bottom = Math.ceil(Math.min(bounds.top + bounds.height, area.top + area.height) * scale) / scale;
+    return new bounds_1.Bounds(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+}

package/dist/lib/render/canvas/text-renderer.js

@@ -27,8 +27,8 @@ const iOSBrokenFonts = ['-apple-system', 'system-ui'];
 const TEXT_OVERFLOW_EPSILON = 1;
 /**
  * Detect CJK (Chinese, Japanese, Korean) characters in a string.
- * CJK characters use the ideographic baseline in browsers, which differs
- * from the alphabetic baseline used for Latin script.
+ * Vertical writing modes use it to keep CJK glyphs upright and on the
+ * ideographic baseline while other scripts are rotated.
  *
  * Covers:
  *   U+2E80–U+2FFF  CJK Radicals Supplement, Kangxi Radicals
@@ -128,15 +128,17 @@ class TextRenderer {
         return w;
     }
     /**
-     * Iterate grapheme clusters one-by-one, applying correct letter-spacing and
-     * per-script baseline for each character.
+     * Iterate grapheme clusters one-by-one, applying correct letter-spacing.
      *
      * Issue #73: When letter-spacing is non-zero, text must be rendered character by
-     * character. This helper centralises two fixes applied during that iteration:
-     *   1. Add `letterSpacing` to each character's advance width (was previously
-     *      omitted, causing characters to render without any spacing).
-     *   2. Switch to the ideographic baseline for CJK glyphs so their vertical
-     *      position matches how browsers lay them out in the DOM.
+     * character, adding `letterSpacing` to each character's advance width.
+     *
+     * In horizontal text every glyph keeps the alphabetic baseline, CJK included:
+     * inline layout aligns a whole line on its alphabetic baseline regardless of
+     * script, and `baseline` was measured for that. Drawing CJK graphemes at the
+     * same y with `textBaseline = 'ideographic'` lifts them above the Latin text
+     * next to them, and away from where the `letterSpacing === 0` whole-string
+     * path draws them.
      *
      * The `renderFn` callback receives (letter, x, y) and performs the actual draw
      * call (fillText or strokeText), allowing fill and stroke paths to share one
@@ -152,15 +154,7 @@ class TextRenderer {
         const fontString = this.ctx.font;
         let left = text.bounds.left;
         for (const letter of letters) {
-            if ((0, exports.hasCJKCharacters)(letter)) {
-                const savedBaseline = this.ctx.textBaseline;
-                this.ctx.textBaseline = 'ideographic';
-                renderFn(letter, left, y);
-                this.ctx.textBaseline = savedBaseline;
-            }
-            else {
-                renderFn(letter, left, y);
-            }
+            renderFn(letter, left, y);
             left += this.cachedMeasureText(letter, fontString) + letterSpacing;
         }
     }
@@ -213,7 +207,7 @@ class TextRenderer {
     /**
      * Render text with letter-spacing applied (fill pass).
      * When letterSpacing is 0 the whole string is drawn in one call; otherwise each
-     * grapheme is drawn individually so spacing and CJK baseline are applied correctly.
+     * grapheme is drawn individually so spacing is applied correctly.
      */
     renderTextWithLetterSpacing(text, letterSpacing, baseline, writingMode = 0 /* WRITING_MODE.HORIZONTAL_TB */) {
         this.renderFillText(text, letterSpacing, baseline, writingMode);

package/dist/lib/render/stacking-context.js

@@ -83,12 +83,13 @@ class ElementPaint {
             this.effects.push(new effects_1.TransformEffect(offsetX, offsetY, zoomMatrix));
         }
     }
-    getEffects(target) {
+    getEffects(target, surfaceRoot) {
         let inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(this.container.styles.position) === -1;
-        let parent = this.parent;
-        const effects = this.effects.slice(0);
+        let parent = this === surfaceRoot ? null : this.parent;
+        const sourceEffects = (paint) => paint.effects.filter((effect) => paint !== surfaceRoot || (!(0, effects_1.isFilterEffect)(effect) && !(0, effects_1.isOpacityEffect)(effect)));
+        const effects = sourceEffects(this);
         while (parent) {
-            const croplessEffects = parent.effects.filter((effect) => !(0, effects_1.isClipEffect)(effect));
+            const croplessEffects = sourceEffects(parent).filter((effect) => !(0, effects_1.isClipEffect)(effect));
             if (inFlow || parent.container.styles.position !== 0 /* POSITION.STATIC */ || !parent.parent) {
                 inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(parent.container.styles.position) === -1;
                 if ((0, exports.hasOverflowClip)(parent.container.styles)) {
@@ -103,7 +104,7 @@ class ElementPaint {
             else {
                 effects.unshift(...croplessEffects);
             }
-            parent = parent.parent;
+            parent = parent === surfaceRoot ? null : parent.parent;
         }
         return effects.filter((effect) => (0, bitwise_1.contains)(effect.target, target));
     }

package/dist/types/render/canvas/canvas-renderer.d.ts

@@ -4,6 +4,7 @@ import { ElementContainer } from '../../dom/element-container';
 import { Path } from '../path';
 import { BoundCurves } from '../bound-curves';
 import { ReplacedElementContainer } from '../../dom/replaced-elements';
+import { SurfaceBudget } from './surface-bounds';
 import { Context } from '../../core/context';
 export type RenderConfigurations = RenderOptions & {
     backgroundColor: Color | null;
@@ -33,6 +34,8 @@ export interface RenderOptions {
     height: number;
 }
 export declare class CanvasRenderer {
+    private readonly surfaceRoot?;
+    private readonly surfaceBudget;
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
     private readonly context;
@@ -42,8 +45,11 @@ export declare class CanvasRenderer {
     private readonly borderImageRenderer;
     private readonly effectsRenderer;
     private readonly textRenderer;
-    constructor(context: Context, options: RenderConfigurations);
+    private legacySubtree;
+    constructor(context: Context, options: RenderConfigurations, surfaceRoot?: ElementPaint | undefined, surfaceBudget?: SurfaceBudget);
     renderStack(stack: StackingContext): Promise<void>;
+    private canComposite;
+    private renderCompositedStack;
     renderNode(paint: ElementPaint): Promise<void>;
     /**
      * Helper method to render text with paint order support
@@ -55,6 +61,7 @@ export declare class CanvasRenderer {
     mask(paths: Path[]): void;
     path(paths: Path[]): void;
     formatPath(paths: Path[]): void;
+    private renderSurfaceBoxShadow;
     renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void>;
     render(element: ElementContainer): Promise<HTMLCanvasElement>;
     /**

package/dist/types/render/canvas/filter-surface.d.ts

@@ -0,0 +1,17 @@
+export declare class FilterSurfaceError extends Error {
+}
+export declare const releaseSurface: (canvas: HTMLCanvasElement) => void;
+export interface SimpleFilter {
+    blur: number;
+    shadow?: {
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+    };
+}
+export declare function parseSimpleFilter(value: string | null): SimpleFilter | null;
+export declare function filterOutset(filter: SimpleFilter): number;
+export declare function supportsNativeFilters(owner?: Document): boolean;
+export declare function renderFilterSurface(source: HTMLCanvasElement, filter: SimpleFilter, opacity: number, scale: number, signal?: AbortSignal): Promise<HTMLCanvasElement>;
+export declare function renderSvgFilterSurface(source: HTMLCanvasElement, { blur, shadow }: SimpleFilter, opacity: number, scale: number, signal?: AbortSignal): Promise<HTMLCanvasElement>;

package/dist/types/render/canvas/surface-bounds.d.ts

@@ -0,0 +1,10 @@
+import { Bounds } from '../../css/layout/bounds';
+import { ElementContainer } from '../../dom/element-container';
+export declare const MAX_SURFACE_PIXELS: number;
+export declare const MAX_SURFACE_SIDE = 8192;
+export interface SurfaceBudget {
+    pixels: number;
+}
+export declare function reserveSurface(budget: SurfaceBudget, width: number, height: number): number;
+export declare function surfaceBounds(container: ElementContainer): Bounds;
+export declare function cropSurface(bounds: Bounds, viewport: Bounds, margin: number, scale: number): Bounds;

package/dist/types/render/canvas/text-renderer.d.ts

@@ -49,15 +49,17 @@ export declare class TextRenderer {
      */
     private cachedMeasureText;
     /**
-     * Iterate grapheme clusters one-by-one, applying correct letter-spacing and
-     * per-script baseline for each character.
+     * Iterate grapheme clusters one-by-one, applying correct letter-spacing.
      *
      * Issue #73: When letter-spacing is non-zero, text must be rendered character by
-     * character. This helper centralises two fixes applied during that iteration:
-     *   1. Add `letterSpacing` to each character's advance width (was previously
-     *      omitted, causing characters to render without any spacing).
-     *   2. Switch to the ideographic baseline for CJK glyphs so their vertical
-     *      position matches how browsers lay them out in the DOM.
+     * character, adding `letterSpacing` to each character's advance width.
+     *
+     * In horizontal text every glyph keeps the alphabetic baseline, CJK included:
+     * inline layout aligns a whole line on its alphabetic baseline regardless of
+     * script, and `baseline` was measured for that. Drawing CJK graphemes at the
+     * same y with `textBaseline = 'ideographic'` lifts them above the Latin text
+     * next to them, and away from where the `letterSpacing === 0` whole-string
+     * path draws them.
      *
      * The `renderFn` callback receives (letter, x, y) and performs the actual draw
      * call (fillText or strokeText), allowing fill and stroke paths to share one
@@ -68,7 +70,7 @@ export declare class TextRenderer {
     /**
      * Render text with letter-spacing applied (fill pass).
      * When letterSpacing is 0 the whole string is drawn in one call; otherwise each
-     * grapheme is drawn individually so spacing and CJK baseline are applied correctly.
+     * grapheme is drawn individually so spacing is applied correctly.
      */
     renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number, writingMode?: WRITING_MODE): void;
     private canRenderWholeText;

package/dist/types/render/stacking-context.d.ts

@@ -21,7 +21,7 @@ export declare class ElementPaint {
     readonly curves: BoundCurves;
     listValue?: string;
     constructor(container: ElementContainer, parent: ElementPaint | null);
-    getEffects(target: EffectTarget): IElementEffect[];
+    getEffects(target: EffectTarget, surfaceRoot?: ElementPaint): IElementEffect[];
 }
 /** @internal – exported for testing only. */
 export declare const hasOverflowClip: (styles: ElementContainer["styles"]) => boolean;

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.4.3",
+  "version": "2.4.4",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",
@@ -67,6 +67,7 @@
     "express": "^5.2.1",
     "filenamify-url": "4.0.0",
     "glob": "^13.0.0",
+    "html2canvas-pro-baseline": "npm:html2canvas-pro@2.4.3",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
     "karma": "^6.3.2",
@@ -82,6 +83,7 @@
     "node-simctl": "^8.1.2",
     "pixelmatch": "^7.2.0",
     "platform": "^1.3.6",
+    "playwright": "1.60.0",
     "pngjs": "^7.0.0",
     "prettier": "^3.3.3",
     "puppeteer": "^24.34.0",
@@ -110,7 +112,7 @@
   },
   "scripts": {
     "prebuild": "rimraf dist/ && rimraf build/ && mkdir -p dist && mkdir -p build",
-    "build": "tsc --module commonjs -p tsconfig.build.json && rolldown -c rolldown.config.ts && pnpm build:create-reftest-list && rolldown -c tests/rolldown.testrunner.config.ts",
+    "build": "tsc --module commonjs -p tsconfig.build.json && rolldown -c rolldown.config.ts && pnpm build:create-reftest-list && rolldown -c tests/rolldown.testrunner.config.ts && node scripts/copy-filter-baseline.mjs",
     "build:testrunner": "rolldown -c tests/rolldown.testrunner.config.ts",
     "build:reftest-result-list": "tsx scripts/create-reftest-result-list.ts",
     "build:create-reftest-list": "tsx scripts/create-reftest-list.ts tests/reftests/ignore.txt build/reftests.js",