html2canvas-pro 2.0.4 → 2.1.0

package/src/core/cache-storage.ts

@@ -0,0 +1,315 @@
+import { FEATURES } from './features';
+import { Context } from './context';
+
+/**
+ * CacheStorage (Deprecated static methods)
+ *
+ * @deprecated The static methods of CacheStorage are deprecated.
+ * Use OriginChecker class instead for instance-based origin checking.
+ *
+ * For backward compatibility, these methods remain but should not be used in new code.
+ */
+export class CacheStorage {
+    private static _link?: HTMLAnchorElement;
+    private static _origin = 'about:blank';
+
+    /**
+     * @deprecated Use OriginChecker.getOrigin() instead
+     */
+    static getOrigin(url: string): string {
+        const link = CacheStorage._link;
+        if (!link) {
+            return 'about:blank';
+        }
+
+        link.href = url;
+        link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
+        return link.protocol + link.hostname + link.port;
+    }
+
+    /**
+     * @deprecated Use OriginChecker.isSameOrigin() instead
+     */
+    static isSameOrigin(src: string): boolean {
+        return CacheStorage.getOrigin(src) === CacheStorage._origin;
+    }
+
+    /**
+     * @deprecated No longer needed. OriginChecker is created per Context.
+     */
+    static setContext(window: Window): void {
+        CacheStorage._link = window.document.createElement('a');
+        CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
+    }
+}
+
+export interface ResourceOptions {
+    imageTimeout: number;
+    useCORS: boolean;
+    allowTaint: boolean;
+    proxy?: string;
+    customIsSameOrigin?: (this: void, src: string, oldFn: (src: string) => boolean) => boolean | Promise<boolean>;
+    maxCacheSize?: number; // Maximum cache size (default: 100, max: 10000)
+}
+
+interface CacheEntry {
+    value: Promise<HTMLImageElement | HTMLCanvasElement | undefined>;
+}
+
+export class Cache {
+    private readonly _cache: Map<string, CacheEntry> = new Map();
+    private readonly maxSize: number;
+    private readonly _pendingOperations: Map<string, Promise<void>> = new Map();
+
+    constructor(
+        private readonly context: Context,
+        private readonly _options: ResourceOptions
+    ) {
+        // Default cache size: 100 items
+        this.maxSize = _options.maxCacheSize ?? 100;
+
+        if (this.maxSize < 1) {
+            throw new Error('Cache maxSize must be at least 1');
+        }
+
+        if (this.maxSize > 10000) {
+            this.context.logger.warn(
+                `Cache maxSize ${this.maxSize} is very large and may cause memory issues. ` +
+                    `Consider using a smaller value (recommended: 100-1000).`
+            );
+        }
+    }
+
+    addImage(src: string): Promise<void> {
+        // Wait for any pending operations on this key
+        const pending = this._pendingOperations.get(src);
+        if (pending) {
+            return pending;
+        }
+
+        if (this.has(src)) {
+            // Move to end for LRU ordering
+            const entry = this._cache.get(src)!;
+            this._cache.delete(src);
+            this._cache.set(src, entry);
+            return Promise.resolve();
+        }
+
+        if (isBlobImage(src) || isRenderable(src)) {
+            // Create a pending operation to ensure atomicity
+            const operation = this._addImageInternal(src);
+            this._pendingOperations.set(src, operation);
+            operation.finally(() => {
+                this._pendingOperations.delete(src);
+            });
+
+            return operation;
+        }
+
+        return Promise.resolve();
+    }
+
+    private async _addImageInternal(src: string): Promise<void> {
+        const timeoutMs = this._options.imageTimeout ?? 15000;
+        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'}`
+            );
+        });
+
+        // Store the promise with timeout in cache
+        this.set(src, imageWithTimeout);
+    }
+
+    private withTimeout<T>(promise: Promise<T>, timeoutMs: number, message: string): Promise<T> {
+        if (timeoutMs <= 0) {
+            return promise;
+        }
+
+        let timeoutId: ReturnType<typeof setTimeout> | undefined;
+        const timeout = new Promise<never>((_, reject) => {
+            timeoutId = setTimeout(() => reject(new Error(message)), timeoutMs);
+        });
+
+        return Promise.race([promise, timeout]).finally(() => {
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+        });
+    }
+
+    match(src: string): Promise<HTMLImageElement | HTMLCanvasElement | undefined> | undefined {
+        const entry = this._cache.get(src);
+        if (entry) {
+            // 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 (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.
+     */
+    private set(key: string, value: Promise<HTMLImageElement | HTMLCanvasElement | undefined>): void {
+        if (this._cache.has(key)) {
+            // Update existing entry: move to end of Map
+            this._cache.delete(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}`);
+            }
+        }
+
+        this._cache.set(key, { value });
+    }
+
+    /**
+     * Get cache size
+     */
+    size(): number {
+        return this._cache.size;
+    }
+
+    /**
+     * Get max cache size
+     */
+    getMaxSize(): number {
+        return this.maxSize;
+    }
+
+    /**
+     * Clear all cache entries
+     */
+    clear(): void {
+        this._cache.clear();
+    }
+
+    private async loadImage(key: string): Promise<HTMLImageElement | undefined> {
+        const originChecker = this.context.originChecker;
+        const defaultIsSameOrigin = (src: string) => originChecker.isSameOrigin(src);
+
+        const isSameOrigin: boolean =
+            typeof this._options.customIsSameOrigin === 'function'
+                ? await this._options.customIsSameOrigin(key, defaultIsSameOrigin)
+                : defaultIsSameOrigin(key);
+        const useCORS =
+            !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
+        const useProxy =
+            !isInlineImage(key) &&
+            !isSameOrigin &&
+            !isBlobImage(key) &&
+            typeof this._options.proxy === 'string' &&
+            FEATURES.SUPPORT_CORS_XHR &&
+            !useCORS;
+        if (
+            !isSameOrigin &&
+            this._options.allowTaint === false &&
+            !isInlineImage(key) &&
+            !isBlobImage(key) &&
+            !useProxy &&
+            !useCORS
+        ) {
+            return;
+        }
+
+        let src = key;
+        if (useProxy) {
+            src = await this.proxy(src);
+        }
+
+        this.context.logger.debug(`Added image ${key.substring(0, 256)}`);
+
+        return await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
+            if (isInlineBase64Image(src) || useCORS) {
+                img.crossOrigin = 'anonymous';
+            }
+            img.src = src;
+            if (img.complete === true) {
+                // Inline XML images may fail to parse, throwing an Error later on
+                setTimeout(() => resolve(img), 500);
+            }
+        });
+    }
+
+    private has(key: string): boolean {
+        return this._cache.has(key);
+    }
+
+    keys(): Promise<string[]> {
+        return Promise.resolve(Array.from(this._cache.keys()));
+    }
+
+    private proxy(src: string): Promise<string> {
+        const proxy = this._options.proxy;
+
+        if (!proxy) {
+            throw new Error('No proxy defined');
+        }
+
+        const key = src.substring(0, 256);
+
+        return new Promise((resolve, reject) => {
+            const responseType = FEATURES.SUPPORT_RESPONSE_TYPE ? 'blob' : 'text';
+            const xhr = new XMLHttpRequest();
+            xhr.onload = () => {
+                if (xhr.status === 200) {
+                    if (responseType === 'text') {
+                        resolve(xhr.response);
+                    } else {
+                        const reader = new FileReader();
+                        reader.addEventListener('load', () => resolve(reader.result as string), false);
+                        reader.addEventListener('error', (e) => reject(e), false);
+                        reader.readAsDataURL(xhr.response);
+                    }
+                } else {
+                    reject(`Failed to proxy resource ${key} with status code ${xhr.status}`);
+                }
+            };
+
+            xhr.onerror = reject;
+            const queryString = proxy.indexOf('?') > -1 ? '&' : '?';
+            xhr.open('GET', `${proxy}${queryString}url=${encodeURIComponent(src)}&responseType=${responseType}`);
+
+            if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
+                xhr.responseType = responseType;
+            }
+
+            if (this._options.imageTimeout) {
+                const timeout = this._options.imageTimeout;
+                xhr.timeout = timeout;
+                xhr.ontimeout = () => reject(`Timed out (${timeout}ms) proxying ${key}`);
+            }
+
+            xhr.send();
+        });
+    }
+}
+
+const INLINE_SVG = /^data:image\/svg\+xml/i;
+const INLINE_BASE64 = /^data:image\/.*;base64,/i;
+const INLINE_IMG = /^data:image\/.*/i;
+
+const isRenderable = (src: string): boolean => FEATURES.SUPPORT_SVG_DRAWING || !isSVG(src);
+const isInlineImage = (src: string): boolean => INLINE_IMG.test(src);
+const isInlineBase64Image = (src: string): boolean => INLINE_BASE64.test(src);
+const isBlobImage = (src: string): boolean => src.substr(0, 4) === 'blob';
+
+const isSVG = (src: string): boolean => src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);

package/src/core/context.ts

@@ -0,0 +1,31 @@
+import { Logger } from './logger';
+import { Cache, ResourceOptions } from './cache-storage';
+import { Bounds } from '../css/layout/bounds';
+import { OriginChecker } from './origin-checker';
+import { Html2CanvasConfig } from '../config';
+
+export type ContextOptions = {
+    logging: boolean;
+    cache?: Cache;
+} & ResourceOptions;
+
+export class Context {
+    private readonly instanceName = `#${Context.instanceCount++}`;
+    readonly logger: Logger;
+    readonly cache: Cache;
+    readonly originChecker: OriginChecker;
+    readonly config: Html2CanvasConfig;
+
+    private static instanceCount = 1;
+
+    constructor(
+        options: ContextOptions,
+        public windowBounds: Bounds,
+        config: Html2CanvasConfig
+    ) {
+        this.config = config;
+        this.logger = new Logger({ id: this.instanceName, enabled: options.logging });
+        this.originChecker = new OriginChecker(config.window);
+        this.cache = options.cache ?? config.cache ?? new Cache(this, options);
+    }
+}

package/src/core/debugger.ts

@@ -0,0 +1,32 @@
+const elementDebuggerAttribute = 'data-html2canvas-debug';
+export const enum DebuggerType {
+    NONE,
+    ALL,
+    CLONE,
+    PARSE,
+    RENDER
+}
+
+const getElementDebugType = (element: Element): DebuggerType => {
+    if (typeof element.getAttribute !== 'function') {
+        return DebuggerType.NONE;
+    }
+    const attribute = element.getAttribute(elementDebuggerAttribute);
+    switch (attribute) {
+        case 'all':
+            return DebuggerType.ALL;
+        case 'clone':
+            return DebuggerType.CLONE;
+        case 'parse':
+            return DebuggerType.PARSE;
+        case 'render':
+            return DebuggerType.RENDER;
+        default:
+            return DebuggerType.NONE;
+    }
+};
+
+export const isDebugging = (element: Element, type: Omit<DebuggerType, DebuggerType.NONE>): boolean => {
+    const elementType = getElementDebugType(element);
+    return elementType === DebuggerType.ALL || type === elementType;
+};

package/src/core/features.ts

@@ -0,0 +1,222 @@
+import { fromCodePoint, toCodePoints } from 'css-line-break';
+
+const testRangeBounds = (document: Document) => {
+    const TEST_HEIGHT = 123;
+
+    if (document.createRange) {
+        const range = document.createRange();
+        if (range.getBoundingClientRect) {
+            const testElement = document.createElement('boundtest');
+            testElement.style.height = `${TEST_HEIGHT}px`;
+            testElement.style.display = 'block';
+            document.body.appendChild(testElement);
+
+            range.selectNode(testElement);
+            const rangeBounds = range.getBoundingClientRect();
+            const rangeHeight = Math.round(rangeBounds.height);
+            document.body.removeChild(testElement);
+            if (rangeHeight === TEST_HEIGHT) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+};
+
+const testIOSLineBreak = (document: Document) => {
+    const testElement = document.createElement('boundtest');
+    testElement.style.width = '50px';
+    testElement.style.display = 'block';
+    testElement.style.fontSize = '12px';
+    testElement.style.letterSpacing = '0px';
+    testElement.style.wordSpacing = '0px';
+    document.body.appendChild(testElement);
+    const range = document.createRange();
+
+    testElement.innerHTML = typeof ''.repeat === 'function' ? '👨'.repeat(10) : '';
+
+    const node = testElement.firstChild as Text;
+
+    const textList = toCodePoints(node.data).map((i) => fromCodePoint(i));
+    let offset = 0;
+    let prev: DOMRect = {} as DOMRect;
+
+    // ios 13 does not handle range getBoundingClientRect line changes correctly #2177
+    const supports = textList.every((text, i) => {
+        range.setStart(node, offset);
+        range.setEnd(node, offset + text.length);
+        const rect = range.getBoundingClientRect();
+
+        offset += text.length;
+        const boundAhead = rect.x > prev.x || rect.y > prev.y;
+
+        prev = rect;
+        if (i === 0) {
+            return true;
+        }
+
+        return boundAhead;
+    });
+
+    document.body.removeChild(testElement);
+    return supports;
+};
+
+const testCORS = (): boolean => typeof new Image().crossOrigin !== 'undefined';
+
+const testResponseType = (): boolean => typeof new XMLHttpRequest().responseType === 'string';
+
+const testSVG = (document: Document): boolean => {
+    const img = new Image();
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return false;
+    }
+
+    img.src = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;
+
+    try {
+        ctx.drawImage(img, 0, 0);
+        canvas.toDataURL();
+    } catch (e) {
+        return false;
+    }
+    return true;
+};
+
+const isGreenPixel = (data: Uint8ClampedArray): boolean =>
+    data[0] === 0 && data[1] === 255 && data[2] === 0 && data[3] === 255;
+
+const testForeignObject = (document: Document): Promise<boolean> => {
+    const canvas = document.createElement('canvas');
+    const size = 100;
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return Promise.reject(false);
+    }
+    ctx.fillStyle = 'rgb(0, 255, 0)';
+    ctx.fillRect(0, 0, size, size);
+
+    const img = new Image();
+    const greenImageSrc = canvas.toDataURL();
+    img.src = greenImageSrc;
+    const svg = createForeignObjectSVG(size, size, 0, 0, img);
+    ctx.fillStyle = 'red';
+    ctx.fillRect(0, 0, size, size);
+
+    return loadSerializedSVG(svg)
+        .then((img: HTMLImageElement) => {
+            ctx.drawImage(img, 0, 0);
+            const data = ctx.getImageData(0, 0, size, size).data;
+            ctx.fillStyle = 'red';
+            ctx.fillRect(0, 0, size, size);
+
+            const node = document.createElement('div');
+            node.style.backgroundImage = `url(${greenImageSrc})`;
+            node.style.height = `${size}px`;
+            // Firefox 55 does not render inline <img /> tags
+            return isGreenPixel(data)
+                ? loadSerializedSVG(createForeignObjectSVG(size, size, 0, 0, node))
+                : Promise.reject(false);
+        })
+        .then((img: HTMLImageElement) => {
+            ctx.drawImage(img, 0, 0);
+            // Edge does not render background-images
+            return isGreenPixel(ctx.getImageData(0, 0, size, size).data);
+        })
+        .catch(() => false);
+};
+
+export const createForeignObjectSVG = (
+    width: number,
+    height: number,
+    x: number,
+    y: number,
+    node: Node
+): SVGForeignObjectElement => {
+    const xmlns = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(xmlns, 'svg');
+    const foreignObject = document.createElementNS(xmlns, 'foreignObject');
+    svg.setAttributeNS(null, 'width', width.toString());
+    svg.setAttributeNS(null, 'height', height.toString());
+
+    foreignObject.setAttributeNS(null, 'width', '100%');
+    foreignObject.setAttributeNS(null, 'height', '100%');
+    foreignObject.setAttributeNS(null, 'x', x.toString());
+    foreignObject.setAttributeNS(null, 'y', y.toString());
+    foreignObject.setAttributeNS(null, 'externalResourcesRequired', 'true');
+    svg.appendChild(foreignObject);
+
+    foreignObject.appendChild(node);
+
+    return svg;
+};
+
+export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+
+        img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
+    });
+};
+
+export const FEATURES = {
+    get SUPPORT_RANGE_BOUNDS(): boolean {
+        'use strict';
+        const value = testRangeBounds(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', { value });
+        return value;
+    },
+    get SUPPORT_WORD_BREAKING(): boolean {
+        'use strict';
+        const value = FEATURES.SUPPORT_RANGE_BOUNDS && testIOSLineBreak(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_WORD_BREAKING', { value });
+        return value;
+    },
+    get SUPPORT_SVG_DRAWING(): boolean {
+        'use strict';
+        const value = testSVG(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', { value });
+        return value;
+    },
+    get SUPPORT_FOREIGNOBJECT_DRAWING(): Promise<boolean> {
+        'use strict';
+        const value =
+            typeof Array.from === 'function' && typeof window.fetch === 'function'
+                ? testForeignObject(document)
+                : Promise.resolve(false);
+        Object.defineProperty(FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', { value });
+        return value;
+    },
+    get SUPPORT_CORS_IMAGES(): boolean {
+        'use strict';
+        const value = testCORS();
+        Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', { value });
+        return value;
+    },
+    get SUPPORT_RESPONSE_TYPE(): boolean {
+        'use strict';
+        const value = testResponseType();
+        Object.defineProperty(FEATURES, 'SUPPORT_RESPONSE_TYPE', { value });
+        return value;
+    },
+    get SUPPORT_CORS_XHR(): boolean {
+        'use strict';
+        const value = 'withCredentials' in new XMLHttpRequest();
+        Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', { value });
+        return value;
+    },
+    get SUPPORT_NATIVE_TEXT_SEGMENTATION(): boolean {
+        'use strict';
+
+        const value = !!(typeof Intl !== 'undefined' && (Intl as any).Segmenter);
+        Object.defineProperty(FEATURES, 'SUPPORT_NATIVE_TEXT_SEGMENTATION', { value });
+        return value;
+    }
+};

package/src/core/logger.ts

@@ -0,0 +1,64 @@
+export interface LoggerOptions {
+    id: string;
+    enabled: boolean;
+}
+
+export class Logger {
+    static instances: { [key: string]: Logger } = {};
+
+    private readonly id: string;
+    private readonly enabled: boolean;
+    private readonly start: number;
+
+    constructor({ id, enabled }: LoggerOptions) {
+        this.id = id;
+        this.enabled = enabled;
+        this.start = Date.now();
+    }
+
+    debug(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
+                // eslint-disable-next-line no-console
+                console.debug(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+
+    getTime(): number {
+        return Date.now() - this.start;
+    }
+
+    info(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
+                // eslint-disable-next-line no-console
+                console.info(this.id, `${this.getTime()}ms`, ...args);
+            }
+        }
+    }
+
+    warn(...args: unknown[]): void {
+        if (this.enabled) {
+            if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
+                console.warn(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+
+    error(...args: unknown[]): void {
+        if (this.enabled) {
+            if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
+                console.error(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+}