html2canvas-pro 2.1.0 → 2.1.1

package/dist/lib/core/cache-storage.js

@@ -245,5 +245,5 @@ const INLINE_IMG = /^data:image\/.*/i;
 const isRenderable = (src) => features_1.FEATURES.SUPPORT_SVG_DRAWING || !isSVG(src);
 const isInlineImage = (src) => INLINE_IMG.test(src);
 const isInlineBase64Image = (src) => INLINE_BASE64.test(src);
-const isBlobImage = (src) => src.substr(0, 4) === 'blob';
-const isSVG = (src) => src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);
+const isBlobImage = (src) => src.substring(0, 4) === 'blob';
+const isSVG = (src) => src.slice(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);

package/dist/lib/core/features.js

@@ -79,7 +79,7 @@ const testForeignObject = (document) => {
     canvas.height = size;
     const ctx = canvas.getContext('2d');
     if (!ctx) {
-        return Promise.reject(false);
+        return Promise.reject(new Error('Failed to get 2D rendering context'));
     }
     ctx.fillStyle = 'rgb(0, 255, 0)';
     ctx.fillRect(0, 0, size, size);
@@ -101,7 +101,7 @@ const testForeignObject = (document) => {
         // Firefox 55 does not render inline <img /> tags
         return isGreenPixel(data)
             ? (0, exports.loadSerializedSVG)((0, exports.createForeignObjectSVG)(size, size, 0, 0, node))
-            : Promise.reject(false);
+            : Promise.reject(new Error('ForeignObject rendering not supported'));
     })
         .then((img) => {
         ctx.drawImage(img, 0, 0);

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

@@ -87,6 +87,9 @@ class BackgroundRenderer {
         canvas.width = width;
         canvas.height = height;
         const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
         const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
         (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength || 1).forEach((colorStop) => gradient.addColorStop(colorStop.stop, (0, color_utilities_1.asString)(colorStop.color)));
         ctx.fillStyle = gradient;
@@ -168,6 +171,9 @@ class BackgroundRenderer {
         canvas.width = Math.max(1, width);
         canvas.height = Math.max(1, height);
         const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return image;
+        }
         // Apply image smoothing based on CSS image-rendering property
         if (imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED || imageRendering === image_rendering_1.IMAGE_RENDERING.CRISP_EDGES) {
             this.context.logger.debug(`Disabling image smoothing for background image due to CSS image-rendering`);

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

@@ -34,7 +34,11 @@ class CanvasRenderer {
         this.context = context;
         this.options = options;
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D rendering context from canvas');
+        }
+        this.ctx = ctx;
         if (!options.canvas) {
             this.canvas.width = Math.floor(options.width * options.scale);
             this.canvas.height = Math.floor(options.height * options.scale);

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

@@ -8,7 +8,11 @@ class ForeignObjectRenderer {
         this.context = context;
         this.options = options;
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D rendering context from canvas');
+        }
+        this.ctx = ctx;
         this.canvas.width = Math.floor(options.width * options.scale);
         this.canvas.height = Math.floor(options.height * options.scale);
         this.canvas.style.width = `${options.width}px`;

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.1.1",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",
@@ -48,14 +47,11 @@
     "@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 +61,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 +72,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",
@@ -101,7 +95,6 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "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",
@@ -142,7 +135,6 @@
     "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();

package/src/core/__tests__/cache-storage.test.ts

@@ -1,205 +0,0 @@
-import { strictEqual, ok, deepStrictEqual } from 'assert';
-import { Cache, ResourceOptions } from '../cache-storage';
-import { Context } from '../context';
-import { Bounds } from '../../css/layout/bounds';
-import { Html2CanvasConfig } from '../../config';
-
-describe('Cache LRU', () => {
-    let context: Context;
-    let cache: Cache;
-
-    beforeEach(() => {
-        const mockWindow = {
-            document: {
-                createElement: (_name: string) => {
-                    let _href = '';
-                    return {
-                        set href(value: string) {
-                            _href = value;
-                        },
-                        get href() {
-                            return _href;
-                        },
-                        get protocol() {
-                            return 'http:';
-                        },
-                        get hostname() {
-                            return 'localhost';
-                        },
-                        get port() {
-                            return '';
-                        }
-                    };
-                }
-            },
-            location: { href: 'http://localhost/' }
-        } as unknown as Window;
-
-        const config = new Html2CanvasConfig({ window: mockWindow });
-        context = new Context(
-            {
-                logging: false,
-                imageTimeout: 15000,
-                useCORS: false,
-                allowTaint: false
-            },
-            new Bounds(0, 0, 800, 600),
-            config
-        );
-
-        const options: ResourceOptions = {
-            imageTimeout: 15000,
-            useCORS: false,
-            allowTaint: false,
-            maxCacheSize: 3 // Small size for testing
-        };
-
-        cache = new Cache(context, options);
-    });
-
-    it('should enforce maximum cache size', () => {
-        strictEqual(cache.getMaxSize(), 3);
-        strictEqual(cache.size(), 0);
-    });
-
-    it('should add images to cache', () => {
-        const blob1 = 'blob:http://localhost/image1';
-        const blob2 = 'blob:http://localhost/image2';
-
-        cache.addImage(blob1);
-        strictEqual(cache.size(), 1);
-
-        cache.addImage(blob2);
-        strictEqual(cache.size(), 2);
-    });
-
-    it('should not exceed max cache size', () => {
-        const blobs = [
-            'blob:http://localhost/image1',
-            'blob:http://localhost/image2',
-            'blob:http://localhost/image3',
-            'blob:http://localhost/image4' // This should trigger eviction
-        ];
-
-        blobs.forEach((blob) => cache.addImage(blob));
-
-        // Should not exceed max size (3)
-        strictEqual(cache.size(), 3);
-    });
-
-    it('should evict least recently used entry when full', async () => {
-        const blob1 = 'blob:http://localhost/image1';
-        const blob2 = 'blob:http://localhost/image2';
-        const blob3 = 'blob:http://localhost/image3';
-        const blob4 = 'blob:http://localhost/image4';
-
-        // Add 3 images (fill cache)
-        cache.addImage(blob1);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        cache.addImage(blob2);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        cache.addImage(blob3);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        strictEqual(cache.size(), 3);
-
-        // Access blob2 and blob3 (update their access time)
-        cache.match(blob2);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        cache.match(blob3);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        // Add blob4 - should evict blob1 (oldest, never accessed)
-        cache.addImage(blob4);
-
-        strictEqual(cache.size(), 3);
-
-        // blob1 should be evicted
-        strictEqual(cache.match(blob1), undefined);
-
-        // blob2, blob3, blob4 should exist
-        ok(cache.match(blob2) !== undefined);
-        ok(cache.match(blob3) !== undefined);
-        ok(cache.match(blob4) !== undefined);
-    });
-
-    it('should update access time on repeated access', async () => {
-        const blob1 = 'blob:http://localhost/image1';
-        const blob2 = 'blob:http://localhost/image2';
-        const blob3 = 'blob:http://localhost/image3';
-
-        cache.addImage(blob1);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        cache.addImage(blob2);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        cache.addImage(blob3);
-        strictEqual(cache.size(), 3);
-
-        // Access blob1 multiple times (update access time)
-        cache.match(blob1);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        cache.addImage(blob1); // Should update access time
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        // Add 4th image - should evict blob2 (oldest unaccessed)
-        const blob4 = 'blob:http://localhost/image4';
-        cache.addImage(blob4);
-
-        strictEqual(cache.size(), 3);
-        strictEqual(cache.match(blob2), undefined); // Evicted
-        ok(cache.match(blob1) !== undefined); // Still exists
-    });
-
-    it('should clear all cache entries', () => {
-        cache.addImage('blob:http://localhost/image1');
-        cache.addImage('blob:http://localhost/image2');
-        strictEqual(cache.size(), 2);
-
-        cache.clear();
-        strictEqual(cache.size(), 0);
-    });
-
-    it('should return cache keys', async () => {
-        const blob1 = 'blob:http://localhost/image1';
-        const blob2 = 'blob:http://localhost/image2';
-
-        cache.addImage(blob1);
-        cache.addImage(blob2);
-
-        deepStrictEqual(await cache.keys(), [blob1, blob2]);
-    });
-
-    it('should throw error for invalid max size', () => {
-        const options: ResourceOptions = {
-            imageTimeout: 15000,
-            useCORS: false,
-            allowTaint: false,
-            maxCacheSize: 0 // Invalid
-        };
-
-        try {
-            new Cache(context, options);
-            ok(false, 'Should have thrown error');
-        } catch (error: any) {
-            ok(error.message.includes('at least 1'));
-        }
-    });
-
-    it('should use default max size if not specified', () => {
-        const options: ResourceOptions = {
-            imageTimeout: 15000,
-            useCORS: false,
-            allowTaint: false
-            // maxCacheSize not specified
-        };
-
-        const cacheWithDefault = new Cache(context, options);
-        strictEqual(cacheWithDefault.getMaxSize(), 100); // Default
-    });
-});