@ohos-ports/html2canvas-pro 0.0.0-stage → 2.3.2-beta.0

package/dist/lib/core/features.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FEATURES = exports.loadSerializedSVG = exports.createForeignObjectSVG = void 0;
+const css_line_break_1 = require("css-line-break");
+const testRangeBounds = (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) => {
+    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;
+    const textList = (0, css_line_break_1.toCodePoints)(node.data).map((i) => (0, css_line_break_1.fromCodePoint)(i));
+    let offset = 0;
+    let prev = {};
+    // 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 = () => typeof new Image().crossOrigin !== 'undefined';
+const testResponseType = () => typeof new XMLHttpRequest().responseType === 'string';
+const testSVG = (document) => {
+    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) => data[0] === 0 && data[1] === 255 && data[2] === 0 && data[3] === 255;
+const testForeignObject = (document) => {
+    const canvas = document.createElement('canvas');
+    const size = 100;
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return Promise.reject(new Error('Failed to get 2D rendering context'));
+    }
+    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 = (0, exports.createForeignObjectSVG)(size, size, 0, 0, img);
+    ctx.fillStyle = 'red';
+    ctx.fillRect(0, 0, size, size);
+    return (0, exports.loadSerializedSVG)(svg)
+        .then((img) => {
+        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)
+            ? (0, exports.loadSerializedSVG)((0, exports.createForeignObjectSVG)(size, size, 0, 0, node))
+            : Promise.reject(new Error('ForeignObject rendering not supported'));
+    })
+        .then((img) => {
+        ctx.drawImage(img, 0, 0);
+        // Edge does not render background-images
+        return isGreenPixel(ctx.getImageData(0, 0, size, size).data);
+    })
+        .catch(() => false);
+};
+const createForeignObjectSVG = (width, height, x, y, node) => {
+    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;
+};
+exports.createForeignObjectSVG = createForeignObjectSVG;
+const loadSerializedSVG = (svg) => {
+    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))}`;
+    });
+};
+exports.loadSerializedSVG = loadSerializedSVG;
+exports.FEATURES = {
+    get SUPPORT_RANGE_BOUNDS() {
+        'use strict';
+        const value = testRangeBounds(document);
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_RANGE_BOUNDS', { value });
+        return value;
+    },
+    get SUPPORT_WORD_BREAKING() {
+        'use strict';
+        const value = exports.FEATURES.SUPPORT_RANGE_BOUNDS && testIOSLineBreak(document);
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_WORD_BREAKING', { value });
+        return value;
+    },
+    get SUPPORT_SVG_DRAWING() {
+        'use strict';
+        const value = testSVG(document);
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_SVG_DRAWING', { value });
+        return value;
+    },
+    get SUPPORT_FOREIGNOBJECT_DRAWING() {
+        'use strict';
+        const value = typeof Array.from === 'function' && typeof window.fetch === 'function'
+            ? testForeignObject(document)
+            : Promise.resolve(false);
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', { value });
+        return value;
+    },
+    get SUPPORT_CORS_IMAGES() {
+        'use strict';
+        const value = testCORS();
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_CORS_IMAGES', { value });
+        return value;
+    },
+    get SUPPORT_RESPONSE_TYPE() {
+        'use strict';
+        const value = testResponseType();
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_RESPONSE_TYPE', { value });
+        return value;
+    },
+    get SUPPORT_CORS_XHR() {
+        'use strict';
+        const value = 'withCredentials' in new XMLHttpRequest();
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_CORS_XHR', { value });
+        return value;
+    },
+    get SUPPORT_NATIVE_TEXT_SEGMENTATION() {
+        'use strict';
+        // Intl.Segmenter is TC39 Stage 4 but not yet in TS lib types
+        const value = !!(typeof Intl !== 'undefined' && Intl.Segmenter);
+        Object.defineProperty(exports.FEATURES, 'SUPPORT_NATIVE_TEXT_SEGMENTATION', { value });
+        return value;
+    }
+};

package/dist/lib/core/logger.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logger = void 0;
+class Logger {
+    constructor({ id, enabled }) {
+        this.id = id;
+        this.enabled = enabled;
+        this.start = Date.now();
+    }
+    debug(...args) {
+        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() {
+        return Date.now() - this.start;
+    }
+    info(...args) {
+        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) {
+        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) {
+        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);
+            }
+        }
+    }
+}
+exports.Logger = Logger;
+Logger.instances = {};

package/dist/lib/core/lru-map.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LRUMap = void 0;
+/**
+ * Generic LRU (Least-Recently-Used) wrapper over a native `Map`.
+ *
+ * Both the CSS parse cache and the background pattern cache implement the
+ * same LRU eviction pattern using Map's insertion-order guarantee.  This
+ * tiny utility centralises that logic so it can be reused without
+ * duplication.
+ *
+ * Usage:
+ * ```ts
+ * const cache = new LRUMap<string, CanvasPattern>(50);
+ * const entry = cache.get(key); // promotes if found, returns undefined otherwise
+ * cache.set(key, value);         // evicts oldest entry when at capacity
+ * ```
+ */
+class LRUMap {
+    constructor(maxSize) {
+        this.maxSize = maxSize;
+        this._map = new Map();
+    }
+    /**
+     * Get a value by key.
+     * On cache hit the entry is promoted to the end of the Map (most-recently-used).
+     * Returns `undefined` on miss.
+     */
+    get(key) {
+        if (!this._map.has(key)) {
+            return undefined;
+        }
+        // Delete-then-set promotes the entry to MRU position.
+        const value = this._map.get(key);
+        this._map.delete(key);
+        this._map.set(key, value);
+        return value;
+    }
+    /**
+     * Insert or update a key-value pair.
+     * If the key already exists it is moved to MRU position.  If the map is
+     * at capacity the least-recently-used entry (oldest insertion order) is
+     * evicted before inserting.
+     */
+    set(key, value) {
+        if (this._map.has(key)) {
+            this._map.delete(key);
+        }
+        else if (this._map.size >= this.maxSize) {
+            const oldestKey = this._map.keys().next().value;
+            if (oldestKey !== undefined) {
+                this._map.delete(oldestKey);
+            }
+        }
+        this._map.set(key, value);
+    }
+    /** Current number of entries. */
+    get size() {
+        return this._map.size;
+    }
+    /** Remove all entries. */
+    clear() {
+        this._map.clear();
+    }
+}
+exports.LRUMap = LRUMap;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OriginChecker = void 0;
+/**
+ * Origin Checker
+ *
+ * Provides origin checking functionality without global static state.
+ * Each instance maintains its own anchor element and origin reference.
+ *
+ * Replaces the static methods in CacheStorage with instance-based approach.
+ */
+class OriginChecker {
+    constructor(window) {
+        if (!window || !window.document) {
+            throw new Error('Valid window object required for OriginChecker');
+        }
+        if (!window.location || !window.location.href) {
+            throw new Error('Window object must have valid location');
+        }
+        this.link = window.document.createElement('a');
+        this.origin = this.getOrigin(window.location.href);
+    }
+    /**
+     * Get the origin (protocol + hostname + port) of a URL
+     *
+     * @param url - URL to parse
+     * @returns Origin string (e.g., "https://example.com:8080")
+     */
+    getOrigin(url) {
+        this.link.href = url;
+        // IE9 hack: accessing href twice to ensure it's properly parsed
+        this.link.href = this.link.href;
+        return this.link.protocol + this.link.hostname + this.link.port;
+    }
+    /**
+     * Check if a URL is from the same origin as the context
+     *
+     * @param src - URL to check
+     * @returns true if same origin, false otherwise
+     */
+    isSameOrigin(src) {
+        return this.getOrigin(src) === this.origin;
+    }
+    /**
+     * Get the current context origin
+     *
+     * @returns The origin of the context window
+     */
+    getContextOrigin() {
+        return this.origin;
+    }
+}
+exports.OriginChecker = OriginChecker;

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

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PerformanceMonitor = void 0;
+/**
+ * Performance Monitor
+ *
+ * Tracks performance metrics throughout the rendering pipeline.
+ * Provides insights into where time is spent during rendering.
+ *
+ * Usage:
+ * ```typescript
+ * const monitor = new PerformanceMonitor(context);
+ *
+ * monitor.start('clone');
+ * await cloneDocument();
+ * monitor.end('clone');
+ *
+ * const summary = monitor.getSummary();
+ * ```
+ */
+class PerformanceMonitor {
+    constructor(context, enabled = true) {
+        this.context = context;
+        this.activeMetrics = new Map();
+        this.completedMetrics = [];
+        this.enabled = enabled;
+        // Fallback for environments without performance.now()
+        this.getTime =
+            typeof performance !== 'undefined' && typeof performance.now === 'function'
+                ? () => performance.now()
+                : () => Date.now();
+    }
+    /**
+     * Start measuring a performance metric
+     *
+     * @param name - Unique name for this metric
+     * @param metadata - Optional metadata to attach
+     */
+    start(name, metadata) {
+        if (!this.enabled) {
+            return;
+        }
+        if (this.activeMetrics.has(name)) {
+            this.context?.logger.warn(`Performance metric '${name}' already started. Overwriting.`);
+        }
+        this.activeMetrics.set(name, {
+            name,
+            startTime: this.getTime(),
+            metadata
+        });
+    }
+    /**
+     * End measuring a performance metric
+     *
+     * @param name - Name of the metric to end
+     * @returns The completed metric, or undefined if not found
+     */
+    end(name) {
+        if (!this.enabled) {
+            return undefined;
+        }
+        const metric = this.activeMetrics.get(name);
+        if (!metric) {
+            this.context?.logger.warn(`Performance metric '${name}' not found. Was start() called?`);
+            return undefined;
+        }
+        metric.endTime = this.getTime();
+        metric.duration = metric.endTime - metric.startTime;
+        this.completedMetrics.push(metric);
+        this.activeMetrics.delete(name);
+        this.context?.logger.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
+        return metric;
+    }
+    /**
+     * Measure a synchronous function
+     *
+     * @param name - Name for this measurement
+     * @param fn - Function to measure
+     * @param metadata - Optional metadata
+     * @returns The function's return value
+     */
+    measure(name, fn, metadata) {
+        this.start(name, metadata);
+        try {
+            const result = fn();
+            this.end(name);
+            return result;
+        }
+        catch (error) {
+            this.end(name);
+            throw error;
+        }
+    }
+    /**
+     * Measure an asynchronous function
+     *
+     * @param name - Name for this measurement
+     * @param fn - Async function to measure
+     * @param metadata - Optional metadata
+     * @returns Promise resolving to the function's return value
+     */
+    async measureAsync(name, fn, metadata) {
+        this.start(name, metadata);
+        try {
+            const result = await fn();
+            this.end(name);
+            return result;
+        }
+        catch (error) {
+            this.end(name);
+            throw error;
+        }
+    }
+    /**
+     * Get all completed metrics
+     *
+     * @returns Array of completed performance metrics
+     */
+    getMetrics() {
+        return [...this.completedMetrics];
+    }
+    /**
+     * Get a specific metric by name
+     *
+     * @param name - Metric name
+     * @returns The metric, or undefined if not found
+     */
+    getMetric(name) {
+        return this.completedMetrics.find((m) => m.name === name);
+    }
+    /**
+     * Get performance summary
+     *
+     * @returns Aggregated performance data
+     */
+    getSummary() {
+        const totalDuration = this.completedMetrics.reduce((sum, metric) => sum + (metric.duration || 0), 0);
+        const breakdown = this.completedMetrics.map((metric) => ({
+            name: metric.name,
+            duration: metric.duration || 0,
+            percentage: totalDuration > 0 ? (((metric.duration || 0) / totalDuration) * 100).toFixed(1) + '%' : '0%'
+        }));
+        return {
+            totalDuration,
+            metrics: this.getMetrics(),
+            breakdown
+        };
+    }
+    /**
+     * Log performance summary to console
+     */
+    logSummary() {
+        if (!this.enabled || this.completedMetrics.length === 0 || !this.context) {
+            return;
+        }
+        const summary = this.getSummary();
+        this.context.logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
+        summary.breakdown
+            .sort((a, b) => b.duration - a.duration)
+            .forEach((item) => {
+            this.context.logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
+        });
+    }
+    /**
+     * Clear all metrics
+     */
+    clear() {
+        this.activeMetrics.clear();
+        this.completedMetrics.splice(0);
+    }
+    /**
+     * Check if monitoring is enabled
+     */
+    isEnabled() {
+        return this.enabled;
+    }
+    /**
+     * Get active (uncompleted) metrics
+     * Useful for debugging leaked measurements
+     */
+    getActiveMetrics() {
+        return Array.from(this.activeMetrics.keys());
+    }
+}
+exports.PerformanceMonitor = PerformanceMonitor;

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

@@ -0,0 +1,132 @@
+"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 document_cloner_1 = require("../dom/document-cloner");
+const node_type_guards_1 = require("../dom/node-type-guards");
+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 abort_helper_1 = require("./abort-helper");
+const config_assembler_1 = require("./config-assembler");
+const background_parser_1 = require("./background-parser");
+const renderElement = async (element, opts, config) => {
+    (0, config_assembler_1.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 = (0, config_assembler_1.assembleResourceOptions)(opts);
+    const contextOptions = (0, config_assembler_1.assembleContextOptions)(opts, config, resourceOptions);
+    const windowOptions = (0, config_assembler_1.assembleWindowOptions)(opts, defaultView);
+    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;
+    (0, abort_helper_1.throwIfAborted)(signal);
+    const foreignObjectRendering = opts.foreignObjectRendering ?? false;
+    const cloneOptions = (0, config_assembler_1.assembleCloneOptions)(opts, config, foreignObjectRendering);
+    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);
+        }
+        (0, abort_helper_1.throwIfAborted)(signal);
+    }
+    const { width, height, left, top } = (0, node_type_guards_1.isBodyElement)(clonedElement) || (0, node_type_guards_1.isHTMLElement)(clonedElement)
+        ? (0, bounds_1.parseDocumentSize)(clonedElement.ownerDocument)
+        : (0, bounds_1.parseBounds)(context, clonedElement);
+    const backgroundColor = (0, background_parser_1.parseBackgroundColor)(context, clonedElement, opts.backgroundColor);
+    const renderOptions = (0, config_assembler_1.assembleRenderOptions)(opts, backgroundColor, left, top, width, height, defaultView.devicePixelRatio ?? 1);
+    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');
+            (0, abort_helper_1.throwIfAborted)(signal);
+            // Enter defer mode: collect all image URLs during parse without
+            // starting individual loads. This avoids serialised loading in
+            // DOM-traversal order.
+            context.cache.startDefer();
+            root = (0, node_parser_1.parseTree)(context, clonedElement);
+            perfMonitor.end('parse');
+            // Batch-preload all collected images in parallel before rendering.
+            perfMonitor.start('preload');
+            await context.cache.preloadAll();
+            perfMonitor.end('preload');
+            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');
+            (0, abort_helper_1.throwIfAborted)(signal);
+            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;

package/dist/lib/core/util.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SMALL_IMAGE = void 0;
+exports.SMALL_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';