html2canvas-pro 2.0.4 → 2.1.0

package/dist/lib/config.js

@@ -11,11 +11,11 @@ exports.getDefaultConfig = getDefaultConfig;
  */
 class Html2CanvasConfig {
     constructor(options = {}) {
-        // Try to get window from options first, then fall back to global window
-        this.window = options.window || (typeof window !== 'undefined' ? window : null);
-        if (!this.window) {
+        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;
     }
@@ -69,4 +69,3 @@ function setDefaultConfig(config) {
 function getDefaultConfig() {
     return _defaultConfig;
 }
-//# sourceMappingURL=config.js.map

package/dist/lib/core/bitwise.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.contains = void 0;
 const contains = (bit, value) => (bit & value) !== 0;
 exports.contains = contains;
-//# sourceMappingURL=bitwise.js.map

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

@@ -62,11 +62,10 @@ class Cache {
             return pending;
         }
         if (this.has(src)) {
-            // Update last accessed time
+            // Move to end for LRU ordering
             const entry = this._cache.get(src);
-            if (entry) {
-                entry.lastAccessed = Date.now();
-            }
+            this._cache.delete(src);
+            this._cache.set(src, entry);
             return Promise.resolve();
         }
         if (isBlobImage(src) || isRenderable(src)) {
@@ -81,15 +80,8 @@ class Cache {
         return Promise.resolve();
     }
     async _addImageInternal(src) {
-        // Create image load promise with timeout protection
         const timeoutMs = this._options.imageTimeout ?? 15000;
-        const timeoutPromise = new Promise((_, reject) => {
-            setTimeout(() => {
-                reject(new Error(`Image load timeout after ${timeoutMs}ms: ${src}`));
-            }, timeoutMs);
-        });
-        // Race between image load and timeout
-        const imageWithTimeout = Promise.race([this.loadImage(src), timeoutPromise]);
+        const imageWithTimeout = this.withTimeout(this.loadImage(src), timeoutMs, `Timed out (${timeoutMs}ms) loading image`);
         // Handle errors to prevent unhandled rejections
         imageWithTimeout.catch((error) => {
             this.context.logger.error(`Failed to load image ${src}: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -97,51 +89,49 @@ class Cache {
         // Store the promise with timeout in cache
         this.set(src, imageWithTimeout);
     }
+    withTimeout(promise, timeoutMs, message) {
+        if (timeoutMs <= 0) {
+            return promise;
+        }
+        let timeoutId;
+        const timeout = new Promise((_, reject) => {
+            timeoutId = setTimeout(() => reject(new Error(message)), timeoutMs);
+        });
+        return Promise.race([promise, timeout]).finally(() => {
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+        });
+    }
     match(src) {
         const entry = this._cache.get(src);
         if (entry) {
-            // Update last accessed time on access
-            entry.lastAccessed = Date.now();
+            // Move to end for LRU ordering (O(1))
+            this._cache.delete(src);
+            this._cache.set(src, entry);
             return entry.value;
         }
         return undefined;
     }
     /**
-     * Set a value in cache with LRU eviction
+     * Set a value in cache with LRU eviction (O(1) via Map insertion order).
+     * Map preserves insertion order; delete+set on access moves items to the end.
+     * The first key in Map.keys() is always the least recently used.
      */
     set(key, value) {
-        // If key already exists, update it without eviction
         if (this._cache.has(key)) {
-            const entry = this._cache.get(key);
-            entry.value = value;
-            entry.lastAccessed = Date.now();
-            return;
+            // Update existing entry: move to end of Map
+            this._cache.delete(key);
         }
-        // For new keys, check if we need to evict
-        if (this._cache.size >= this.maxSize) {
-            this.evictLRU();
-        }
-        this._cache.set(key, {
-            value,
-            lastAccessed: Date.now()
-        });
-    }
-    /**
-     * Evict least recently used entry
-     */
-    evictLRU() {
-        let oldestKey = null;
-        let oldestTime = Infinity;
-        for (const [key, entry] of this._cache.entries()) {
-            if (entry.lastAccessed < oldestTime) {
-                oldestTime = entry.lastAccessed;
-                oldestKey = key;
+        else if (this._cache.size >= this.maxSize) {
+            // Evict LRU (first key = least recently used) — O(1)
+            const lruKey = this._cache.keys().next().value;
+            if (lruKey !== undefined) {
+                this._cache.delete(lruKey);
+                this.context.logger.debug(`Cache: Evicted LRU entry: ${lruKey}`);
             }
         }
-        if (oldestKey) {
-            this._cache.delete(oldestKey);
-            this.context.logger.debug(`Cache: Evicted LRU entry: ${oldestKey}`);
-        }
+        this._cache.set(key, { value });
     }
     /**
      * Get cache size
@@ -200,16 +190,13 @@ class Cache {
                 // Inline XML images may fail to parse, throwing an Error later on
                 setTimeout(() => resolve(img), 500);
             }
-            if (this._options.imageTimeout > 0) {
-                setTimeout(() => reject(`Timed out (${this._options.imageTimeout}ms) loading image`), this._options.imageTimeout);
-            }
         });
     }
     has(key) {
         return this._cache.has(key);
     }
     keys() {
-        return Promise.resolve(Object.keys(this._cache));
+        return Promise.resolve(Array.from(this._cache.keys()));
     }
     proxy(src) {
         const proxy = this._options.proxy;
@@ -260,4 +247,3 @@ 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);
-//# sourceMappingURL=cache-storage.js.map

package/dist/lib/core/context.js

@@ -16,4 +16,3 @@ class Context {
 }
 exports.Context = Context;
 Context.instanceCount = 1;
-//# sourceMappingURL=context.js.map

package/dist/lib/core/debugger.js

@@ -25,4 +25,3 @@ const isDebugging = (element, type) => {
     return elementType === 1 /* DebuggerType.ALL */ || type === elementType;
 };
 exports.isDebugging = isDebugging;
-//# sourceMappingURL=debugger.js.map

package/dist/lib/core/features.js

@@ -187,4 +187,3 @@ exports.FEATURES = {
         return value;
     }
 };
-//# sourceMappingURL=features.js.map

package/dist/lib/core/logger.js

@@ -54,4 +54,3 @@ class Logger {
 }
 exports.Logger = Logger;
 Logger.instances = {};
-//# sourceMappingURL=logger.js.map

package/dist/lib/core/origin-checker.js

@@ -51,4 +51,3 @@ class OriginChecker {
     }
 }
 exports.OriginChecker = OriginChecker;
-//# sourceMappingURL=origin-checker.js.map

package/dist/lib/core/performance-monitor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoOpPerformanceMonitor = exports.PerformanceMonitor = void 0;
+exports.PerformanceMonitor = void 0;
 /**
  * Performance Monitor
  *
@@ -183,26 +183,3 @@ class PerformanceMonitor {
     }
 }
 exports.PerformanceMonitor = PerformanceMonitor;
-/**
- * Create a no-op performance monitor for production
- * Has minimal overhead when disabled
- */
-class NoOpPerformanceMonitor extends PerformanceMonitor {
-    constructor() {
-        super(null, false);
-    }
-    start() {
-        // No-op
-    }
-    end() {
-        return undefined;
-    }
-    measure(_name, fn) {
-        return fn();
-    }
-    async measureAsync(_name, fn) {
-        return await fn();
-    }
-}
-exports.NoOpPerformanceMonitor = NoOpPerformanceMonitor;
-//# sourceMappingURL=performance-monitor.js.map

package/dist/lib/core/render-element.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderElement = void 0;
+const bounds_1 = require("../css/layout/bounds");
+const color_1 = require("../css/types/color");
+const color_utilities_1 = require("../css/types/color-utilities");
+const document_cloner_1 = require("../dom/document-cloner");
+const node_parser_1 = require("../dom/node-parser");
+const canvas_renderer_1 = require("../render/canvas/canvas-renderer");
+const foreignobject_renderer_1 = require("../render/canvas/foreignobject-renderer");
+const context_1 = require("./context");
+const validator_1 = require("./validator");
+const performance_monitor_1 = require("./performance-monitor");
+const coerceNumberOptions = (opts) => {
+    const numKeys = [
+        'scale',
+        'width',
+        'height',
+        'imageTimeout',
+        'x',
+        'y',
+        'windowWidth',
+        'windowHeight',
+        'scrollX',
+        'scrollY'
+    ];
+    numKeys.forEach((key) => {
+        const v = opts[key];
+        if (v !== undefined && v !== null && typeof v !== 'number') {
+            const n = Number(v);
+            if (!Number.isNaN(n)) {
+                opts[key] = n;
+            }
+        }
+    });
+};
+const renderElement = async (element, opts, config) => {
+    coerceNumberOptions(opts);
+    // Input validation (unless explicitly skipped)
+    if (!opts.skipValidation) {
+        const validator = opts.validator || (0, validator_1.createDefaultValidator)();
+        const elementValidation = validator.validateElement(element);
+        if (!elementValidation.valid) {
+            throw new Error(elementValidation.error);
+        }
+        const optionsValidation = validator.validateOptions(opts);
+        if (!optionsValidation.valid) {
+            throw new Error(`Invalid options: ${optionsValidation.error}`);
+        }
+    }
+    if (!element || typeof element !== 'object') {
+        throw new Error('Invalid element provided as first argument');
+    }
+    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`);
+    }
+    const resourceOptions = {
+        allowTaint: opts.allowTaint ?? false,
+        imageTimeout: opts.imageTimeout ?? 15000,
+        proxy: opts.proxy,
+        useCORS: opts.useCORS ?? false,
+        customIsSameOrigin: opts.customIsSameOrigin
+    };
+    const contextOptions = {
+        logging: opts.logging ?? true,
+        cache: opts.cache ?? config.cache,
+        ...resourceOptions
+    };
+    const DEFAULT_WINDOW_WIDTH = 800;
+    const DEFAULT_WINDOW_HEIGHT = 600;
+    const DEFAULT_SCROLL = 0;
+    const win = defaultView;
+    const windowOptions = {
+        windowWidth: opts.windowWidth ?? win.innerWidth ?? DEFAULT_WINDOW_WIDTH,
+        windowHeight: opts.windowHeight ?? win.innerHeight ?? DEFAULT_WINDOW_HEIGHT,
+        scrollX: opts.scrollX ?? win.pageXOffset ?? DEFAULT_SCROLL,
+        scrollY: opts.scrollY ?? win.pageYOffset ?? DEFAULT_SCROLL
+    };
+    const windowBounds = new bounds_1.Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight);
+    const context = new context_1.Context(contextOptions, windowBounds, config);
+    const performanceMonitoring = opts.enablePerformanceMonitoring ?? opts.logging ?? false;
+    const perfMonitor = new performance_monitor_1.PerformanceMonitor(context, performanceMonitoring);
+    perfMonitor.start('total', {
+        width: windowOptions.windowWidth,
+        height: windowOptions.windowHeight
+    });
+    const signal = opts.signal;
+    if (signal?.aborted) {
+        throw new DOMException('The operation was aborted.', 'AbortError');
+    }
+    const foreignObjectRendering = opts.foreignObjectRendering ?? false;
+    const cloneOptions = {
+        allowTaint: opts.allowTaint ?? false,
+        onclone: opts.onclone,
+        ignoreElements: opts.ignoreElements,
+        iframeContainer: opts.iframeContainer,
+        inlineImages: foreignObjectRendering,
+        copyStyles: foreignObjectRendering,
+        cspNonce: opts.cspNonce ?? config.cspNonce
+    };
+    context.logger.debug(`Starting document clone with size ${windowBounds.width}x${windowBounds.height} scrolled to ${-windowBounds.left},${-windowBounds.top}`);
+    perfMonitor.start('clone');
+    const documentCloner = new document_cloner_1.DocumentCloner(context, element, cloneOptions);
+    const clonedElement = documentCloner.clonedReferenceElement;
+    if (!clonedElement) {
+        throw new Error('Unable to find element in cloned iframe');
+    }
+    const container = await documentCloner.toIFrame(ownerDocument, windowBounds);
+    perfMonitor.end('clone');
+    if (signal?.aborted) {
+        if (opts.removeContainer ?? true) {
+            document_cloner_1.DocumentCloner.destroy(container);
+        }
+        throw new DOMException('The operation was aborted.', 'AbortError');
+    }
+    const { width, height, left, top } = (0, node_parser_1.isBodyElement)(clonedElement) || (0, node_parser_1.isHTMLElement)(clonedElement)
+        ? (0, bounds_1.parseDocumentSize)(clonedElement.ownerDocument)
+        : (0, bounds_1.parseBounds)(context, clonedElement);
+    const backgroundColor = parseBackgroundColor(context, clonedElement, opts.backgroundColor);
+    const renderOptions = {
+        canvas: opts.canvas,
+        backgroundColor,
+        signal,
+        scale: opts.scale ?? defaultView.devicePixelRatio ?? 1,
+        x: (opts.x ?? 0) + left,
+        y: (opts.y ?? 0) + top,
+        width: opts.width ?? Math.ceil(width),
+        height: opts.height ?? Math.ceil(height),
+        imageSmoothing: opts.imageSmoothing,
+        imageSmoothingQuality: opts.imageSmoothingQuality
+    };
+    let canvas;
+    let root;
+    try {
+        if (foreignObjectRendering) {
+            context.logger.debug(`Document cloned, using foreign object rendering`);
+            perfMonitor.start('render-foreignobject');
+            const renderer = new foreignobject_renderer_1.ForeignObjectRenderer(context, renderOptions);
+            canvas = await renderer.render(clonedElement);
+            perfMonitor.end('render-foreignobject');
+        }
+        else {
+            context.logger.debug(`Document cloned, element located at ${left},${top} with size ${width}x${height} using computed rendering`);
+            context.logger.debug(`Starting DOM parsing`);
+            perfMonitor.start('parse');
+            if (signal?.aborted) {
+                throw new DOMException('The operation was aborted.', 'AbortError');
+            }
+            root = (0, node_parser_1.parseTree)(context, clonedElement);
+            perfMonitor.end('parse');
+            if (backgroundColor === root.styles.backgroundColor) {
+                root.styles.backgroundColor = color_1.COLORS.TRANSPARENT;
+            }
+            context.logger.debug(`Starting renderer for element at ${renderOptions.x},${renderOptions.y} with size ${renderOptions.width}x${renderOptions.height}`);
+            perfMonitor.start('render');
+            if (signal?.aborted) {
+                throw new DOMException('The operation was aborted.', 'AbortError');
+            }
+            const renderer = new canvas_renderer_1.CanvasRenderer(context, renderOptions);
+            canvas = await renderer.render(root);
+            perfMonitor.end('render');
+        }
+        perfMonitor.start('cleanup');
+        if (opts.removeContainer ?? true) {
+            if (!document_cloner_1.DocumentCloner.destroy(container)) {
+                context.logger.error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
+            }
+        }
+        perfMonitor.end('cleanup');
+        perfMonitor.end('total');
+        context.logger.debug(`Finished rendering`);
+        if (performanceMonitoring) {
+            perfMonitor.logSummary();
+        }
+        return canvas;
+    }
+    finally {
+        if (root) {
+            root.restoreTree();
+        }
+    }
+};
+exports.renderElement = renderElement;
+const parseBackgroundColor = (context, element, backgroundColorOverride) => {
+    const ownerDocument = element.ownerDocument;
+    // http://www.w3.org/TR/css3-background/#special-backgrounds
+    const documentBackgroundColor = ownerDocument.documentElement
+        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.documentElement).backgroundColor)
+        : color_1.COLORS.TRANSPARENT;
+    const bodyBackgroundColor = ownerDocument.body
+        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.body).backgroundColor)
+        : color_1.COLORS.TRANSPARENT;
+    const defaultBackgroundColor = typeof backgroundColorOverride === 'string'
+        ? (0, color_1.parseColor)(context, backgroundColorOverride)
+        : backgroundColorOverride === null
+            ? color_1.COLORS.TRANSPARENT
+            : 0xffffffff;
+    return element === ownerDocument.documentElement
+        ? (0, color_utilities_1.isTransparent)(documentBackgroundColor)
+            ? (0, color_utilities_1.isTransparent)(bodyBackgroundColor)
+                ? defaultBackgroundColor
+                : bodyBackgroundColor
+            : documentBackgroundColor
+        : defaultBackgroundColor;
+};

package/dist/lib/core/util.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SMALL_IMAGE = void 0;
 exports.SMALL_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-//# sourceMappingURL=util.js.map

package/dist/lib/core/validator.js

@@ -498,4 +498,3 @@ function createStrictValidator(allowedProxyDomains) {
         maxImageTimeout: 60000 // 1 minute
     });
 }
-//# sourceMappingURL=validator.js.map