html2canvas-pro 2.4.5 → 2.5.0

package/dist/lib/render/canvas/filter-surface.js

@@ -1,270 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.releaseSurface = exports.FilterSurfaceError = void 0;
-exports.parseSimpleFilter = parseSimpleFilter;
-exports.filterOutset = filterOutset;
-exports.supportsNativeFilters = supportsNativeFilters;
-exports.renderFilterSurface = renderFilterSurface;
-exports.renderSvgFilterSurface = renderSvgFilterSurface;
-const effects_1 = require("../effects");
-const abort_helper_1 = require("../../core/abort-helper");
-// Only errors in the optional surface path are eligible for legacy fallback.
-class FilterSurfaceError extends Error {
-}
-exports.FilterSurfaceError = FilterSurfaceError;
-const releaseSurface = (canvas) => {
-    canvas.width = canvas.height = 0;
-};
-exports.releaseSurface = releaseSurface;
-// This first renderer integration handles computed blur followed by one shadow.
-// Unsupported chains retain the existing renderer until general filter support lands.
-function parseSimpleFilter(value) {
-    if (!value || value === 'none')
-        return { blur: 0 };
-    const effect = new effects_1.FilterEffect(value);
-    const shadows = value.match(/drop-shadow\(/g) || [];
-    if (shadows.length > 1 || (shadows.length === 1 && !effect.shadow))
-        return null;
-    const blur = effect.safeFilterString.match(/^blur\((\d+(?:\.\d+)?)px\)$/);
-    if (effect.safeFilterString && !blur)
-        return null;
-    if (blur && shadows.length && value.indexOf('blur(') > value.indexOf('drop-shadow('))
-        return null;
-    return {
-        blur: blur ? Number(blur[1]) : 0,
-        shadow: effect.shadow
-            ? {
-                x: effect.shadow.offsetX,
-                y: effect.shadow.offsetY,
-                blur: effect.shadow.blur,
-                color: effect.shadow.color
-            }
-            : undefined
-    };
-}
-function filterOutset(filter) {
-    return Math.ceil(3 * (filter.blur + (filter.shadow?.blur ?? 0)) +
-        Math.max(Math.abs(filter.shadow?.x ?? 0), Math.abs(filter.shadow?.y ?? 0)));
-}
-function canvasLike(source) {
-    const canvas = document.createElement('canvas');
-    canvas.width = source.width;
-    canvas.height = source.height;
-    return canvas;
-}
-const decodeSurface = (image, signal) => new Promise((resolve, reject) => {
-    const finish = (error) => {
-        clearTimeout(timer);
-        signal?.removeEventListener('abort', abort);
-        if (error)
-            reject(error);
-        else
-            resolve();
-    };
-    const abort = () => finish(new DOMException('The operation was aborted.', 'AbortError'));
-    const timer = setTimeout(() => finish(new FilterSurfaceError('Filter surface image decode timed out')), 10000);
-    signal?.addEventListener('abort', abort, { once: true });
-    if (signal?.aborted)
-        abort();
-    else
-        image.decode().then(() => finish(), () => finish(new FilterSurfaceError('Filter surface image decode failed')));
-});
-// Cache only a capability result, never raster storage. Separate Documents may use
-// different Canvas implementations (including embedded webviews and test realms).
-const canvasFilterSupport = new WeakMap();
-function supportsNativeFilters(owner = document) {
-    const cached = canvasFilterSupport.get(owner);
-    if (cached !== undefined)
-        return cached;
-    const source = owner.createElement('canvas');
-    const target = owner.createElement('canvas');
-    let supported = false;
-    try {
-        source.width = source.height = target.width = target.height = 32;
-        const input = source.getContext('2d');
-        const context = target.getContext('2d');
-        // Check before assignment: on older WebKit assigning filter creates an
-        // expando property, not a working implementation.
-        if (input && context && 'filter' in context) {
-            input.fillStyle = '#fff';
-            input.fillRect(8, 8, 8, 8);
-            context.filter = 'blur(2px)';
-            context.drawImage(source, 0, 0);
-            const blurred = context.getImageData(6, 12, 1, 1).data[3] > 0;
-            context.clearRect(0, 0, 32, 32);
-            context.filter = 'drop-shadow(12px 0px 0px rgba(255, 0, 0, 0.5))';
-            context.drawImage(source, 0, 0);
-            const shadow = context.getImageData(24, 12, 1, 1).data;
-            supported = blurred && shadow[0] > 240 && shadow[1] < 10 && shadow[3] >= 126 && shadow[3] <= 129;
-        }
-    }
-    catch {
-        // Readback can itself be unavailable. Be conservative and retain SVG.
-    }
-    finally {
-        (0, exports.releaseSurface)(source);
-        (0, exports.releaseSurface)(target);
-    }
-    canvasFilterSupport.set(owner, supported);
-    return supported;
-}
-function tryNativeFilterSurface(source, { blur, shadow }, opacity, scale, signal) {
-    let filtered;
-    let output;
-    let complete = false;
-    try {
-        (0, abort_helper_1.throwIfAborted)(signal);
-        filtered = canvasLike(source);
-        const context = filtered.getContext('2d');
-        if (!context || !('filter' in context))
-            return null;
-        const functions = [];
-        if (blur)
-            functions.push(`blur(${blur * scale}px)`);
-        if (shadow)
-            functions.push(`drop-shadow(${shadow.x * scale}px ${shadow.y * scale}px ${shadow.blur * scale}px ${shadow.color})`);
-        context.filter = functions.join(' ');
-        if (context.filter === 'none')
-            return null;
-        // Canvas applies globalAlpha before filtering. Filter the complete layer
-        // at alpha 1, then composite opacity separately, including its shadow.
-        context.drawImage(source, 0, 0);
-        (0, abort_helper_1.throwIfAborted)(signal);
-        output = canvasLike(source);
-        const composite = output.getContext('2d');
-        if (!composite)
-            return null;
-        composite.globalAlpha = opacity;
-        composite.drawImage(filtered, 0, 0);
-        (0, abort_helper_1.throwIfAborted)(signal);
-        complete = true;
-        return output;
-    }
-    catch {
-        // A native allocation/draw failure may still succeed through SVG, but
-        // cancellation must never silently degrade to a successful fallback.
-        (0, abort_helper_1.throwIfAborted)(signal);
-        return null;
-    }
-    finally {
-        if (filtered)
-            (0, exports.releaseSurface)(filtered);
-        if (output && !complete)
-            (0, exports.releaseSurface)(output);
-    }
-}
-// Backend selection is internal; the public html2canvas options are unchanged.
-async function renderFilterSurface(source, filter, opacity, scale, signal) {
-    (0, abort_helper_1.throwIfAborted)(signal);
-    if ((filter.blur || filter.shadow) && supportsNativeFilters()) {
-        const output = tryNativeFilterSurface(source, filter, opacity, scale, signal);
-        if (output)
-            return output;
-    }
-    return renderSvgFilterSurface(source, filter, opacity, scale, signal);
-}
-// Explicit SVG entry is internal and allows independent fallback benchmarks/tests.
-// No foreignObject or external image is used.
-async function renderSvgFilterSurface(source, { blur, shadow }, opacity, scale, signal) {
-    (0, abort_helper_1.throwIfAborted)(signal);
-    if (!blur && !shadow) {
-        const output = canvasLike(source);
-        const context = output.getContext('2d');
-        if (!context) {
-            (0, exports.releaseSurface)(output);
-            throw new FilterSurfaceError('Filter surface canvas is unavailable');
-        }
-        context.globalAlpha = opacity;
-        try {
-            context.drawImage(source, 0, 0);
-            return output;
-        }
-        catch {
-            (0, exports.releaseSurface)(output);
-            throw new FilterSurfaceError('Filter surface image cannot be drawn');
-        }
-    }
-    const namespace = 'http://www.w3.org/2000/svg';
-    const element = (tag, attributes = {}) => {
-        const node = document.createElementNS(namespace, tag);
-        Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
-        return node;
-    };
-    const svg = element('svg', {
-        width: source.width,
-        height: source.height,
-        viewBox: `0 0 ${source.width} ${source.height}`
-    });
-    const defs = element('defs');
-    const filter = element('filter', {
-        id: 'composited-filter',
-        filterUnits: 'userSpaceOnUse',
-        x: 0,
-        y: 0,
-        width: source.width,
-        height: source.height,
-        'color-interpolation-filters': 'sRGB'
-    });
-    if (blur) {
-        filter.appendChild(element('feGaussianBlur', { stdDeviation: blur * scale, result: 'blurred-source' }));
-    }
-    if (shadow) {
-        // Explicit primitives avoid the narrower feDropShadow blur observed in WebKit.
-        filter.appendChild(element('feGaussianBlur', {
-            in: blur ? 'blurred-source' : 'SourceAlpha',
-            stdDeviation: shadow.blur * scale
-        }));
-        filter.appendChild(element('feOffset', { dx: shadow.x * scale, dy: shadow.y * scale, result: 'offset-shadow' }));
-        filter.appendChild(element('feFlood', { 'flood-color': shadow.color }));
-        filter.appendChild(element('feComposite', { in2: 'offset-shadow', operator: 'in' }));
-        const merge = element('feMerge');
-        merge.appendChild(element('feMergeNode'));
-        merge.appendChild(element('feMergeNode', { in: blur ? 'blurred-source' : 'SourceGraphic' }));
-        filter.appendChild(merge);
-    }
-    defs.appendChild(filter);
-    svg.appendChild(defs);
-    let sourceUrl;
-    try {
-        sourceUrl = source.toDataURL('image/png');
-        if (sourceUrl === 'data:,')
-            throw new Error('Canvas size is unsupported');
-    }
-    catch {
-        // allowTaint may intentionally produce an unreadable canvas. Keep that
-        // API behavior by letting the caller render the subtree on the old path.
-        throw new FilterSurfaceError('Filter surface pixels cannot be serialized');
-    }
-    svg.appendChild(element('image', {
-        width: source.width,
-        height: source.height,
-        href: sourceUrl,
-        filter: 'url(#composited-filter)'
-    }));
-    const image = new Image();
-    let output;
-    try {
-        image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
-        await decodeSurface(image, signal);
-        (0, abort_helper_1.throwIfAborted)(signal);
-        output = canvasLike(source);
-        const context = output.getContext('2d');
-        if (!context)
-            throw new FilterSurfaceError('Filter surface canvas is unavailable');
-        context.globalAlpha = opacity;
-        context.drawImage(image, 0, 0);
-        return output;
-    }
-    catch (error) {
-        if (output)
-            (0, exports.releaseSurface)(output);
-        if (signal?.aborted)
-            (0, abort_helper_1.throwIfAborted)(signal);
-        throw error instanceof FilterSurfaceError
-            ? error
-            : new FilterSurfaceError('Filter surface image cannot be drawn');
-    }
-    finally {
-        image.removeAttribute('src');
-    }
-}

package/dist/lib/render/canvas/font-utils.js

@@ -1,46 +0,0 @@
-"use strict";
-/**
- * Font measurement utility
- *
- * Provides Canvas API-based font measurement that works correctly with webfonts
- * (which may not be loaded in the original document) and system fonts.
- *
- * Fallback chain:
- *   1. fontBoundingBoxAscent — font-level metric (Chrome 99+, FF 116+, Safari 17.4+)
- *   2. actualBoundingBoxAscent — glyph-level metric (widely supported)
- *   3. fallback value — coarse CSS fallback
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.measureBaseline = exports.measureFontMetrics = void 0;
-const SAMPLE_TEXT = 'Mg'; // characters with both ascender and descender
-const isValidMetric = (value) => value !== undefined && !Number.isNaN(value);
-/**
- * Measure the baseline ascent and full font box for the currently set font.
- */
-const measureFontMetrics = (ctx, fallback) => {
-    const tm = ctx.measureText(SAMPLE_TEXT);
-    const fontMetrics = tm;
-    const baseline = isValidMetric(fontMetrics.fontBoundingBoxAscent)
-        ? fontMetrics.fontBoundingBoxAscent
-        : isValidMetric(tm.actualBoundingBoxAscent)
-            ? tm.actualBoundingBoxAscent
-            : fallback;
-    const height = isValidMetric(fontMetrics.fontBoundingBoxAscent) && isValidMetric(fontMetrics.fontBoundingBoxDescent)
-        ? fontMetrics.fontBoundingBoxAscent + fontMetrics.fontBoundingBoxDescent
-        : isValidMetric(tm.actualBoundingBoxAscent) && isValidMetric(tm.actualBoundingBoxDescent)
-            ? tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
-            : fallback;
-    return { baseline, height };
-};
-exports.measureFontMetrics = measureFontMetrics;
-/**
- * Measure the baseline ascent for the currently set font.
- *
- * @param ctx - Canvas 2D rendering context with ctx.font already set
- * @param fallback - Fallback value when no metrics are available (e.g. fontSize.number)
- * @returns The distance from the text baseline to the top of the bounding box
- */
-const measureBaseline = (ctx, fallback) => {
-    return (0, exports.measureFontMetrics)(ctx, fallback).baseline;
-};
-exports.measureBaseline = measureBaseline;

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

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ForeignObjectRenderer = void 0;
-const features_1 = require("../../core/features");
-const color_utilities_1 = require("../../css/types/color-utilities");
-class ForeignObjectRenderer {
-    constructor(context, options) {
-        this.context = context;
-        this.options = options;
-        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        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`;
-        this.canvas.style.height = `${options.height}px`;
-        this.ctx.scale(this.options.scale, this.options.scale);
-        this.ctx.translate(-options.x, -options.y);
-        this.context.logger.debug(`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`);
-    }
-    async render(element) {
-        if (this.options.signal?.aborted) {
-            throw new DOMException('The operation was aborted.', 'AbortError');
-        }
-        const svg = (0, features_1.createForeignObjectSVG)(this.options.width * this.options.scale, this.options.height * this.options.scale, this.options.scale, this.options.scale, element);
-        const img = await (0, features_1.loadSerializedSVG)(svg);
-        if (this.options.backgroundColor) {
-            this.ctx.fillStyle = (0, color_utilities_1.asString)(this.options.backgroundColor);
-            this.ctx.fillRect(0, 0, this.options.width * this.options.scale, this.options.height * this.options.scale);
-        }
-        this.ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale);
-        return this.canvas;
-    }
-}
-exports.ForeignObjectRenderer = ForeignObjectRenderer;

package/dist/lib/render/canvas/surface-bounds.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAX_SURFACE_SIDE = exports.MAX_SURFACE_PIXELS = void 0;
-exports.reserveSurface = reserveSurface;
-exports.surfaceBounds = surfaceBounds;
-exports.cropSurface = cropSurface;
-const bounds_1 = require("../../css/layout/bounds");
-const length_percentage_1 = require("../../css/types/length-percentage");
-const filter_surface_1 = require("./filter-surface");
-// Budget backing stores across all active nested surfaces in one capture.
-// Reserve source, filtered output and decoded SVG/PNG rasters conservatively.
-// Browser encoder/decoder overhead and the caller's output canvas are separate.
-exports.MAX_SURFACE_PIXELS = 16 * 1024 * 1024;
-exports.MAX_SURFACE_SIDE = 8192;
-function reserveSurface(budget, width, height) {
-    const pixels = width * height * 4;
-    if (!Number.isFinite(pixels) ||
-        width <= 0 ||
-        height <= 0 ||
-        width > exports.MAX_SURFACE_SIDE ||
-        height > exports.MAX_SURFACE_SIDE ||
-        budget.pixels + pixels > exports.MAX_SURFACE_PIXELS)
-        return 0;
-    budget.pixels += pixels;
-    return pixels;
-}
-const expand = (b, margin) => b.add(-margin, -margin, margin * 2, margin * 2);
-const union = (a, b) => new bounds_1.Bounds(Math.min(a.left, b.left), Math.min(a.top, b.top), Math.max(a.left + a.width, b.left + b.width) - Math.min(a.left, b.left), Math.max(a.top + a.height, b.top + b.height) - Math.min(a.top, b.top));
-// Conservative paint bounds for the untransformed subtree supported by this path.
-// Include overflow descendants, text ink padding, box/text shadows and nested filters.
-function surfaceBounds(container) {
-    const styles = container.styles;
-    let bounds = container.bounds;
-    for (const shadow of styles.boxShadow) {
-        if (!shadow.inset) {
-            const spread = Math.max(0, shadow.spread.number) + 3 * shadow.blur.number;
-            bounds = union(bounds, expand(container.bounds.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), spread));
-        }
-    }
-    for (const text of container.textNodes) {
-        for (const part of text.textBounds) {
-            const ink = expand(part.bounds, 2 * (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, container.bounds.height) + styles.webkitTextStrokeWidth);
-            bounds = union(bounds, ink);
-            for (const shadow of styles.textShadow) {
-                bounds = union(bounds, expand(ink.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), 3 * shadow.blur.number));
-            }
-        }
-    }
-    for (const child of container.elements) {
-        if (child.styles.isVisible())
-            bounds = union(bounds, surfaceBounds(child));
-    }
-    const filter = (0, filter_surface_1.parseSimpleFilter)(styles.filter);
-    return expand(bounds, filter ? (0, filter_surface_1.filterOutset)(filter) : 0);
-}
-function cropSurface(bounds, viewport, margin, scale) {
-    // Pixels just outside the destination still contribute through blur/shadow.
-    const area = expand(viewport, margin);
-    const left = Math.floor(Math.max(bounds.left, area.left) * scale) / scale;
-    const top = Math.floor(Math.max(bounds.top, area.top) * scale) / scale;
-    const right = Math.ceil(Math.min(bounds.left + bounds.width, area.left + area.width) * scale) / scale;
-    const bottom = Math.ceil(Math.min(bounds.top + bounds.height, area.top + area.height) * scale) / scale;
-    return new bounds_1.Bounds(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
-}

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

@@ -1,99 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextDecorationRenderer = void 0;
-const color_utilities_1 = require("../../../css/types/color-utilities");
-class TextDecorationRenderer {
-    constructor(ctx) {
-        this.ctx = ctx;
-    }
-    render(bounds, styles) {
-        this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.textDecorationColor || styles.color);
-        let thickness = 1;
-        if (typeof styles.textDecorationThickness === 'number') {
-            thickness = styles.textDecorationThickness;
-        }
-        else if (styles.textDecorationThickness === 'from-font') {
-            thickness = Math.max(1, Math.floor(styles.fontSize.number * 0.05));
-        }
-        let underlineOffset = 0;
-        if (typeof styles.textUnderlineOffset === 'number') {
-            underlineOffset = styles.textUnderlineOffset;
-        }
-        const decorationStyle = styles.textDecorationStyle;
-        styles.textDecorationLine.forEach((line) => {
-            let y = 0;
-            switch (line) {
-                case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
-                    y = bounds.top + bounds.height - thickness + underlineOffset;
-                    break;
-                case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
-                    y = bounds.top;
-                    break;
-                case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
-                    y = bounds.top + (bounds.height / 2 - thickness / 2);
-                    break;
-                default:
-                    return;
-            }
-            this.draw(bounds.left, y, bounds.width, thickness, decorationStyle);
-        });
-    }
-    draw(x, y, width, thickness, style) {
-        switch (style) {
-            case 0 /* TEXT_DECORATION_STYLE.SOLID */:
-                this.ctx.fillRect(x, y, width, thickness);
-                break;
-            case 1 /* TEXT_DECORATION_STYLE.DOUBLE */: {
-                const gap = Math.max(1, thickness);
-                this.ctx.fillRect(x, y, width, thickness);
-                this.ctx.fillRect(x, y + thickness + gap, width, thickness);
-                break;
-            }
-            case 2 /* TEXT_DECORATION_STYLE.DOTTED */:
-                this.drawPattern(x, y, width, thickness, [thickness, thickness * 2]);
-                break;
-            case 3 /* TEXT_DECORATION_STYLE.DASHED */:
-                this.drawPattern(x, y, width, thickness, [thickness * 3, thickness * 2]);
-                break;
-            case 4 /* TEXT_DECORATION_STYLE.WAVY */:
-                this.drawWavy(x, y, width, thickness);
-                break;
-            default:
-                this.ctx.fillRect(x, y, width, thickness);
-        }
-    }
-    drawPattern(x, y, width, thickness, dash) {
-        this.ctx.save();
-        this.ctx.beginPath();
-        this.ctx.setLineDash(dash);
-        this.ctx.lineWidth = thickness;
-        this.ctx.strokeStyle = this.ctx.fillStyle;
-        this.ctx.moveTo(x, y + thickness / 2);
-        this.ctx.lineTo(x + width, y + thickness / 2);
-        this.ctx.stroke();
-        this.ctx.restore();
-    }
-    drawWavy(x, y, width, thickness) {
-        this.ctx.save();
-        this.ctx.beginPath();
-        this.ctx.lineWidth = thickness;
-        this.ctx.strokeStyle = this.ctx.fillStyle;
-        const amplitude = thickness * 2;
-        const wavelength = thickness * 4;
-        let currentX = x;
-        this.ctx.moveTo(currentX, y + thickness / 2);
-        while (currentX < x + width) {
-            const nextX = Math.min(currentX + wavelength / 2, x + width);
-            this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 - amplitude, nextX, y + thickness / 2);
-            currentX = nextX;
-            if (currentX < x + width) {
-                const nextX2 = Math.min(currentX + wavelength / 2, x + width);
-                this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 + amplitude, nextX2, y + thickness / 2);
-                currentX = nextX2;
-            }
-        }
-        this.ctx.stroke();
-        this.ctx.restore();
-    }
-}
-exports.TextDecorationRenderer = TextDecorationRenderer;