html2canvas-pro 2.1.0 → 2.1.1

package/src/core/cache-storage.ts

@@ -1,315 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,222 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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);
-            }
-        }
-    }
-}