html2canvas-pro 2.1.0 → 2.2.0

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

@@ -0,0 +1,18 @@
+/**
+ * Text Decoration Renderer
+ *
+ * Handles rendering of text-decoration lines:
+ * - underline, overline, line-through
+ * - solid, double, dotted, dashed, wavy styles
+ * Extracted from TextRenderer to reduce file size.
+ */
+import { Bounds } from '../../../css/layout/bounds';
+import { CSSParsedDeclaration } from '../../../css';
+export declare class TextDecorationRenderer {
+    private readonly ctx;
+    constructor(ctx: CanvasRenderingContext2D);
+    render(bounds: Bounds, styles: CSSParsedDeclaration): void;
+    private draw;
+    private drawPattern;
+    private drawWavy;
+}

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

@@ -36,6 +36,7 @@ export declare const hasCJKCharacters: (text: string) => boolean;
 export declare class TextRenderer {
     private readonly ctx;
     private readonly options;
+    private readonly decorationRenderer;
     constructor(deps: TextRendererDependencies);
     /**
      * Iterate grapheme clusters one-by-one, applying correct letter-spacing and
@@ -71,12 +72,22 @@ export declare class TextRenderer {
      */
     private renderTextBoundWithPaintOrder;
     private renderTextDecoration;
-    private drawDecorationLine;
     private truncateTextWithEllipsis;
     /**
      * Create font style array
      * Public method used by list rendering
      */
     createFontStyle(styles: CSSParsedDeclaration): string[];
+    /**
+     * Render text with -webkit-line-clamp truncation.
+     * Groups text bounds by their Y position into visual lines, then renders
+     * only the first N-1 complete lines followed by an ellipsis on the Nth line.
+     */
+    private renderLineClampedText;
+    /**
+     * Render single-line text with text-overflow: ellipsis.
+     * Returns true if ellipsis was applied (caller should skip normal rendering).
+     */
+    private renderEllipsisText;
     renderTextNode(text: TextContainer, styles: CSSParsedDeclaration, containerBounds?: Bounds): Promise<void>;
 }

package/dist/types/render/effects.d.ts

@@ -1,11 +1,13 @@
 import { Matrix } from '../css/property-descriptors/transform';
+import { MixBlendMode } from '../css/property-descriptors/mix-blend-mode';
 import { Path } from './path';
 export declare const enum EffectType {
     TRANSFORM = 0,
     CLIP = 1,
     OPACITY = 2,
     CLIP_PATH = 3,
-    BLEND = 4
+    BLEND = 4,
+    FILTER = 5
 }
 export declare const enum EffectTarget {
     BACKGROUND_BORDERS = 2,
@@ -48,13 +50,21 @@ export declare class ClipPathEffect implements IElementEffect {
     constructor(applyClip: (ctx: CanvasRenderingContext2D) => void);
 }
 export declare class BlendEffect implements IElementEffect {
+    readonly mixBlendMode: MixBlendMode;
+    readonly type: EffectType;
+    readonly target: number;
     readonly compositeOperation: GlobalCompositeOperation;
+    constructor(mixBlendMode: MixBlendMode);
+}
+export declare class FilterEffect implements IElementEffect {
+    readonly filterString: string;
     readonly type: EffectType;
     readonly target: number;
-    constructor(compositeOperation: GlobalCompositeOperation);
+    constructor(filterString: string);
 }
 export declare const isTransformEffect: (effect: IElementEffect) => effect is TransformEffect;
 export declare const isClipEffect: (effect: IElementEffect) => effect is ClipEffect;
 export declare const isOpacityEffect: (effect: IElementEffect) => effect is OpacityEffect;
 export declare const isClipPathEffect: (effect: IElementEffect) => effect is ClipPathEffect;
 export declare const isBlendEffect: (effect: IElementEffect) => effect is BlendEffect;
+export declare const isFilterEffect: (effect: IElementEffect) => effect is FilterEffect;

package/dist/types/render/object-fit.d.ts

@@ -1,4 +1,5 @@
 import { ObjectFit } from '../css/property-descriptors/object-fit';
+import { LengthPercentage } from '../css/types/length-percentage';
 export interface ObjectFitBox {
     left: number;
     top: number;
@@ -15,4 +16,4 @@ export interface ObjectFitRendering {
     dw: number;
     dh: number;
 }
-export declare const calculateObjectFitRendering: (intrinsicWidth: number, intrinsicHeight: number, box: ObjectFitBox, objectFit: ObjectFit) => ObjectFitRendering;
+export declare const calculateObjectFitRendering: (intrinsicWidth: number, intrinsicHeight: number, box: ObjectFitBox, objectFit: ObjectFit, objectPosition?: [LengthPercentage, LengthPercentage]) => ObjectFitRendering;

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

@@ -1,23 +1,25 @@
 /**
- * Base interface for all specialized renderers
- * Each renderer is responsible for rendering a specific aspect of an element
+ * Base interface for all specialized renderers.
+ * Each renderer is responsible for rendering a specific aspect of an element.
+ *
+ * @internal This interface is a structural contract; prefer using concrete
+ *           renderer classes (BackgroundRenderer, BorderRenderer, etc.)
+ *           directly rather than relying on the generic IRenderer shape.
  */
 export interface IRenderer {
-    /**
-     * Render the specified aspect of the element
-     */
-    render(...args: any[]): void | Promise<void>;
+    render(...args: unknown[]): void | Promise<void>;
 }
 /**
- * Common dependencies required by renderers
+ * Common dependencies required by renderers.
+ * RenderConfigurations from canvas-renderer.ts provides a concrete type.
  */
 export interface RendererDependencies {
     ctx: CanvasRenderingContext2D;
     scale: number;
-    options: any;
+    options: Record<string, unknown>;
 }
 /**
- * Performance tracking for renderers
+ * Performance tracking for renderers.
  */
 export interface RenderMetrics {
     renderCount: number;

package/package.json

@@ -9,7 +9,6 @@
   "sideEffects": false,
   "files": [
     "dist/",
-    "src/",
     "LICENSE"
   ],
   "exports": {
@@ -20,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",
@@ -42,20 +41,13 @@
   "devDependencies": {
     "@commitlint/cli": "^20.3.0",
     "@commitlint/config-conventional": "^20.2.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-typescript": "^12.3.0",
     "@types/chai": "^5.2.3",
     "@types/express": "^5.0.6",
-    "@types/filenamify-url": "^2.0.1",
-    "@types/glob": "^9.0.0",
     "@types/karma": "^6.3.0",
     "@types/mocha": "^10.0.7",
     "@types/node": "^25.0.3",
     "@types/platform": "^1.3.4",
     "@types/pngjs": "^6.0.5",
-    "@types/promise-polyfill": "^6.0.3",
     "@types/serve-index": "^1.9.4",
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "@typescript-eslint/parser": "^8.50.0",
@@ -65,10 +57,10 @@
     "body-parser": "^2.2.1",
     "chai": "6.2.2",
     "change-case": "^5.4.4",
-    "conventional-changelog-cli": "^5.0.0",
+    "conventional-changelog": "^7.2.1",
+    "conventional-changelog-conventionalcommits": "^9.3.1",
     "cors": "^2.8.5",
     "cz-conventional-changelog": "^3.3.0",
-    "es6-promise": "^4.2.8",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
@@ -76,8 +68,6 @@
     "filenamify-url": "4.0.0",
     "glob": "^13.0.0",
     "husky": "^9.1.7",
-    "jquery": "^3.5.1",
-    "js-polyfills": "^0.1.42",
     "jsdom": "^29.1.1",
     "karma": "^6.3.2",
     "karma-chrome-launcher": "^3.1.0",
@@ -97,11 +87,9 @@
     "puppeteer": "^24.34.0",
     "replace-in-file": "^8.4.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.24.2",
-    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rolldown": "^1.1.2",
     "serve-index": "^1.9.1",
     "slash": "5.1.0",
-    "standard-version": "^9.5.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.22.3",
     "typedoc": "^0.28.19",
@@ -123,8 +111,8 @@
   },
   "scripts": {
     "prebuild": "rimraf dist/ && rimraf build/ && mkdir -p dist && mkdir -p build",
-    "build": "tsc --module commonjs -p tsconfig.build.json && rollup --configPlugin typescript -c rollup.config.ts && pnpm build:create-reftest-list && rollup --configPlugin typescript -c tests/rollup.config.ts && pnpm build:minify",
-    "build:testrunner": "rollup --configPlugin typescript -c tests/rollup.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 && pnpm build:minify",
+    "build:testrunner": "rolldown -c tests/rolldown.testrunner.config.ts",
     "build:minify": "uglifyjs --compress --comments /^!/ -o dist/html2canvas-pro.min.js --mangle -- dist/html2canvas-pro.js",
     "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",
@@ -138,11 +126,10 @@
     "reftests-diff": "mkdir -p tmp/snapshots && vitest run --config vitest.reftest.config.ts",
     "prekarma": "node scripts/ensure-karma-prereqs.mjs",
     "karma": "tsx tests/karma",
-    "watch": "rollup --configPlugin typescript -c rollup.config.ts -w",
+    "watch": "rolldown -w",
     "watch:unittest": "vitest",
     "start": "tsx tests/server --port=8080 --cors=8081",
     "commitlint": "commitlint --config .commitlintrc.json -e -V",
-    "tag": "sh scripts/create-tag.sh",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",

package/dist/lib/invariant.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.invariant = void 0;
-const invariant = (assertion, error) => {
-    if (!assertion) {
-        console.error(error);
-    }
-};
-exports.invariant = invariant;

package/dist/types/invariant.d.ts

@@ -1 +0,0 @@
-export declare const invariant: (assertion: boolean, error: string) => void;

package/src/__tests__/index.ts

@@ -1,99 +0,0 @@
-import html2canvas from '../index';
-
-import { CanvasRenderer } from '../render/canvas/canvas-renderer';
-import { DocumentCloner } from '../dom/document-cloner';
-import { COLORS } from '../css/types/color';
-
-vi.mock('../core/logger');
-vi.mock('../css/layout/bounds');
-vi.mock('../dom/document-cloner');
-vi.mock('../dom/node-parser', () => {
-    return {
-        isBodyElement: () => false,
-        isHTMLElement: () => false,
-        parseTree: vi.fn().mockImplementation(() => {
-            return { styles: {}, restoreTree: vi.fn() };
-        })
-    };
-});
-
-vi.mock('../render/stacking-context');
-vi.mock('../render/canvas/canvas-renderer');
-
-describe('html2canvas', () => {
-    const element = {
-        ownerDocument: {
-            defaultView: {
-                document: {
-                    createElement: () => ({ href: '' })
-                },
-                location: { href: 'http://localhost/' },
-                pageXOffset: 12,
-                pageYOffset: 34,
-                innerWidth: 800,
-                innerHeight: 600
-            }
-        }
-    } as unknown as HTMLElement;
-
-    it('should render with an element', async () => {
-        DocumentCloner.destroy = vi.fn().mockReturnValue(true);
-        await html2canvas(element);
-        expect(CanvasRenderer).toHaveBeenLastCalledWith(
-            expect.objectContaining({
-                cache: expect.any(Object),
-                logger: expect.any(Object),
-                windowBounds: expect.objectContaining({ left: 12, top: 34 })
-            }),
-            expect.objectContaining({
-                backgroundColor: 0xffffffff,
-                scale: 1,
-                height: 50,
-                width: 200,
-                x: 0,
-                y: 0,
-                canvas: undefined
-            })
-        );
-        expect(DocumentCloner.destroy).toBeCalled();
-    });
-
-    it('should have transparent background with backgroundColor: null', async () => {
-        await html2canvas(element, { backgroundColor: null });
-        expect(CanvasRenderer).toHaveBeenLastCalledWith(
-            expect.anything(),
-            expect.objectContaining({
-                backgroundColor: COLORS.TRANSPARENT
-            })
-        );
-    });
-
-    it('should use existing canvas when given as option', async () => {
-        const canvas = {} as HTMLCanvasElement;
-        await html2canvas(element, { canvas });
-        expect(CanvasRenderer).toHaveBeenLastCalledWith(
-            expect.anything(),
-            expect.objectContaining({
-                canvas
-            })
-        );
-    });
-
-    it('should not remove cloned window when removeContainer: false', async () => {
-        DocumentCloner.destroy = vi.fn();
-        await html2canvas(element, { removeContainer: false });
-        expect(CanvasRenderer).toHaveBeenLastCalledWith(
-            expect.anything(),
-            expect.objectContaining({
-                backgroundColor: 0xffffffff,
-                scale: 1,
-                height: 50,
-                width: 200,
-                x: 0,
-                y: 0,
-                canvas: undefined
-            })
-        );
-        expect(DocumentCloner.destroy).not.toBeCalled();
-    });
-});

package/src/config.ts

@@ -1,107 +0,0 @@
-import { Cache } from './core/cache-storage';
-
-/**
- * Configuration options for Html2Canvas
- *
- * This class manages global configuration without using module-level static variables.
- * Each html2canvas invocation can have its own configuration instance.
- */
-export interface ConfigOptions {
-    /**
-     * Window object to use for DOM operations
-     */
-    window?: Window;
-
-    /**
-     * CSP nonce for inline styles
-     * See: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
-     */
-    cspNonce?: string;
-
-    /**
-     * Cache instance to reuse across multiple calls
-     * Useful for avoiding redundant image loads
-     */
-    cache?: Cache;
-}
-
-/**
- * Html2Canvas Configuration
- *
- * Manages configuration state for html2canvas rendering.
- * Eliminates the need for global static variables.
- */
-export class Html2CanvasConfig {
-    readonly window: Window;
-    readonly cspNonce?: string;
-    readonly cache?: Cache;
-
-    constructor(options: ConfigOptions = {}) {
-        const resolvedWindow = options.window || (typeof window !== 'undefined' ? window : undefined);
-
-        if (!resolvedWindow) {
-            throw new Error('Window object is required but not available');
-        }
-
-        this.window = resolvedWindow;
-        this.cspNonce = options.cspNonce;
-        this.cache = options.cache;
-    }
-
-    /**
-     * Create configuration from an element
-     * Extracts window from element's owner document
-     */
-    static fromElement(element: HTMLElement, options: Partial<ConfigOptions> = {}): Html2CanvasConfig {
-        const ownerDocument = element.ownerDocument;
-
-        if (!ownerDocument) {
-            throw new Error('Element is not attached to a document');
-        }
-
-        const defaultView = ownerDocument.defaultView;
-
-        if (!defaultView) {
-            throw new Error('Document is not attached to a window');
-        }
-
-        return new Html2CanvasConfig({
-            window: defaultView,
-            ...options
-        });
-    }
-
-    /**
-     * Clone configuration with override options
-     */
-    clone(options: Partial<ConfigOptions> = {}): Html2CanvasConfig {
-        return new Html2CanvasConfig({
-            window: options.window || this.window,
-            cspNonce: options.cspNonce ?? this.cspNonce,
-            cache: options.cache ?? this.cache
-        });
-    }
-}
-
-/**
- * Default global configuration (for backward compatibility)
- * @deprecated Use Html2CanvasConfig instances instead
- */
-let _defaultConfig: Html2CanvasConfig | null = null;
-
-/**
- * Set default configuration
- * @deprecated Pass configuration directly to html2canvas instead
- */
-export function setDefaultConfig(config: Html2CanvasConfig): void {
-    console.warn('[html2canvas-pro] setDefaultConfig is deprecated. Pass configuration to html2canvas directly.');
-    _defaultConfig = config;
-}
-
-/**
- * Get default configuration
- * @deprecated Pass configuration directly to html2canvas instead
- */
-export function getDefaultConfig(): Html2CanvasConfig | null {
-    return _defaultConfig;
-}

package/src/core/__mocks__/cache-storage.ts

@@ -1 +0,0 @@
-export class CacheStorage {}

package/src/core/__mocks__/context.ts

@@ -1,19 +0,0 @@
-import { logger, Logger } from './logger';
-
-export class Context {
-    readonly logger: Logger = logger;
-
-    readonly _cache: { [key: string]: Promise<any> } = {};
-
-    readonly cache: any;
-
-    constructor() {
-        this.cache = {
-            addImage: vi.fn().mockImplementation((src: string): Promise<void> => {
-                const result = Promise.resolve();
-                this._cache[src] = result;
-                return result;
-            })
-        };
-    }
-}

package/src/core/__mocks__/features.ts

@@ -1,8 +0,0 @@
-export const FEATURES = {
-    SUPPORT_RANGE_BOUNDS: true,
-    SUPPORT_SVG_DRAWING: true,
-    SUPPORT_FOREIGNOBJECT_DRAWING: true,
-    SUPPORT_CORS_IMAGES: true,
-    SUPPORT_RESPONSE_TYPE: true,
-    SUPPORT_CORS_XHR: true
-};

package/src/core/__mocks__/logger.ts

@@ -1,17 +0,0 @@
-export class Logger {
-    debug(): void {}
-
-    static create(): void {}
-
-    static destroy(): void {}
-
-    static getInstance(): Logger {
-        return logger;
-    }
-
-    info(): void {}
-
-    error(): void {}
-}
-
-export const logger = new Logger();