html2canvas-pro 2.4.5 → 2.5.0

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

@@ -1,270 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapTextToWidth = exports.inputTextClipBounds = void 0;
-exports.renderReplacedElements = renderReplacedElements;
-exports.renderFormElements = renderFormElements;
-exports.renderListMarker = renderListMarker;
-const color_utilities_1 = require("../../css/types/color-utilities");
-const image_element_container_1 = require("../../dom/replaced-elements/image-element-container");
-const canvas_element_container_1 = require("../../dom/replaced-elements/canvas-element-container");
-const svg_element_container_1 = require("../../dom/replaced-elements/svg-element-container");
-const iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
-const input_element_container_1 = require("../../dom/replaced-elements/input-element-container");
-const textarea_element_container_1 = require("../../dom/elements/textarea-element-container");
-const select_element_container_1 = require("../../dom/elements/select-element-container");
-const bounds_1 = require("../../css/layout/bounds");
-const text_1 = require("../../css/layout/text");
-const vector_1 = require("../vector");
-const box_sizing_1 = require("../box-sizing");
-const font_utils_1 = require("./font-utils");
-const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
-const length_percentage_1 = require("../../css/types/length-percentage");
-const line_height_1 = require("../../css/property-descriptors/line-height");
-const white_space_1 = require("../../css/property-descriptors/white-space");
-const bitwise_1 = require("../../core/bitwise");
-/**
- * Render replaced elements: Image, Canvas, SVG, IFrame.
- */
-async function renderReplacedElements(ctx, context, options, iframeRendererFactory, container, curves, styles, renderReplacedElementFn) {
-    if (container instanceof image_element_container_1.ImageElementContainer) {
-        try {
-            const image = await context.cache.match(container.src);
-            const prevSmoothing = ctx.imageSmoothingEnabled;
-            if (styles.imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED ||
-                styles.imageRendering === image_rendering_1.IMAGE_RENDERING.CRISP_EDGES) {
-                ctx.imageSmoothingEnabled = false;
-            }
-            else if (styles.imageRendering === image_rendering_1.IMAGE_RENDERING.SMOOTH) {
-                ctx.imageSmoothingEnabled = true;
-            }
-            renderReplacedElementFn(container, curves, image);
-            ctx.imageSmoothingEnabled = prevSmoothing;
-        }
-        catch (e) {
-            context.logger.error(`Error loading image ${container.src}`);
-            context.onError?.(e instanceof Error ? e : new Error(String(e)));
-        }
-    }
-    if (container instanceof canvas_element_container_1.CanvasElementContainer) {
-        renderReplacedElementFn(container, curves, container.canvas);
-    }
-    if (container instanceof svg_element_container_1.SVGElementContainer) {
-        try {
-            const image = await context.cache.match(container.svg);
-            renderReplacedElementFn(container, curves, image);
-        }
-        catch (e) {
-            context.logger.error(`Error loading svg ${container.svg.substring(0, 255)}`);
-            context.onError?.(e instanceof Error ? e : new Error(String(e)));
-        }
-    }
-    if (container instanceof iframe_element_container_1.IFrameElementContainer && container.tree) {
-        const iframeRenderer = iframeRendererFactory(context, {
-            scale: options.scale,
-            backgroundColor: container.backgroundColor,
-            x: 0,
-            y: 0,
-            width: container.width,
-            height: container.height
-        });
-        const canvas = await iframeRenderer.render(container.tree);
-        if (container.width && container.height) {
-            ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
-        }
-    }
-}
-/**
- * Render form element content: checkbox, radio, text input.
- */
-function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
-    if (container instanceof input_element_container_1.InputElementContainer) {
-        const size = Math.min(container.bounds.width, container.bounds.height);
-        if (container.type === input_element_container_1.CHECKBOX && container.checked) {
-            ctx.save();
-            pathFn([
-                new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
-                new vector_1.Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
-                new vector_1.Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
-                new vector_1.Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
-                new vector_1.Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
-                new vector_1.Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
-                new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
-            ]);
-            ctx.fillStyle = (0, color_utilities_1.asString)(input_element_container_1.INPUT_COLOR);
-            ctx.fill();
-            ctx.restore();
-        }
-        else if (container.type === input_element_container_1.RADIO && container.checked) {
-            ctx.save();
-            ctx.beginPath();
-            ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
-            ctx.fillStyle = (0, color_utilities_1.asString)(input_element_container_1.INPUT_COLOR);
-            ctx.fill();
-            ctx.restore();
-        }
-    }
-    if (isTextInputElement(container) && container.value.length) {
-        const [font] = textRenderer.createFontStyle(styles);
-        // Use Canvas API to measure baseline from the actual rendered font
-        ctx.font = font;
-        const fontSizeValue = (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0);
-        const { baseline, height: fontHeight } = (0, font_utils_1.measureFontMetrics)(ctx, fontSizeValue);
-        const isPlaceholder = container instanceof input_element_container_1.InputElementContainer && container.isPlaceholder;
-        ctx.fillStyle = isPlaceholder ? (0, color_utilities_1.asString)(input_element_container_1.PLACEHOLDER_COLOR) : (0, color_utilities_1.asString)(styles.color);
-        ctx.textBaseline = 'alphabetic';
-        ctx.textAlign = canvasTextAlign(container.styles.textAlign);
-        const bounds = (0, box_sizing_1.contentBox)(container);
-        const clipBounds = container instanceof input_element_container_1.InputElementContainer
-            ? (0, exports.inputTextClipBounds)(bounds, (0, box_sizing_1.paddingBox)(container), fontHeight)
-            : bounds;
-        let x = 0;
-        switch (container.styles.textAlign) {
-            case 1 /* TEXT_ALIGN.CENTER */:
-                x += bounds.width / 2;
-                break;
-            case 2 /* TEXT_ALIGN.RIGHT */:
-                x += bounds.width;
-                break;
-        }
-        let verticalOffset = 0;
-        if (container instanceof input_element_container_1.InputElementContainer) {
-            verticalOffset = (bounds.height - fontHeight) / 2;
-        }
-        const textBounds = bounds.add(x, verticalOffset, 0, 0);
-        ctx.save();
-        pathFn([
-            new vector_1.Vector(clipBounds.left, clipBounds.top),
-            new vector_1.Vector(clipBounds.left + clipBounds.width, clipBounds.top),
-            new vector_1.Vector(clipBounds.left + clipBounds.width, clipBounds.top + clipBounds.height),
-            new vector_1.Vector(clipBounds.left, clipBounds.top + clipBounds.height)
-        ]);
-        ctx.clip();
-        // A <textarea> soft-wraps its value at the element width (unless
-        // white-space is `pre`/`nowrap`, e.g. wrap="off"); text inputs are
-        // single-line. Render textareas line-by-line so long values wrap
-        // instead of being clipped on one line (issue #228).
-        const lines = (0, exports.wrapTextToWidth)(ctx, container.value, bounds.width, styles.whiteSpace === white_space_1.WHITE_SPACE.PRE || styles.whiteSpace === white_space_1.WHITE_SPACE.NOWRAP);
-        const lineHeight = (0, line_height_1.computeLineHeight)(styles.lineHeight, fontSizeValue);
-        lines.forEach((line, index) => {
-            let lineX = textBounds.left;
-            const lineWidth = ctx.measureText(line).width;
-            switch (styles.textAlign) {
-                case 1 /* TEXT_ALIGN.CENTER */:
-                    lineX += (bounds.width - lineWidth) / 2;
-                    break;
-                case 2 /* TEXT_ALIGN.RIGHT */:
-                    lineX += bounds.width - lineWidth;
-                    break;
-            }
-            const lineBounds = new bounds_1.Bounds(lineX, textBounds.top + index * lineHeight, 0, 0);
-            textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(line, lineBounds), styles.letterSpacing, baseline, styles.writingMode);
-        });
-        ctx.restore();
-        ctx.textBaseline = 'alphabetic';
-        ctx.textAlign = 'left';
-    }
-}
-/**
- * Native single-line inputs may paint value text into their padding area when
- * fixed height and vertical padding leave a content box shorter than the font.
- * Preserve the content box horizontally, but avoid clipping those glyphs to the
- * collapsed vertical content box.
- * @internal exported for testing
- */
-const inputTextClipBounds = (contentBounds, inputPaddingBox, fontHeight) => contentBounds.height < fontHeight
-    ? new bounds_1.Bounds(contentBounds.left, inputPaddingBox.top, contentBounds.width, inputPaddingBox.height)
-    : contentBounds;
-exports.inputTextClipBounds = inputTextClipBounds;
-/**
- * Split text into lines that fit the given pixel width, preserving hard line
- * breaks and (when wrapping is enabled) breaking at word boundaries — mirroring
- * how a <textarea> lays out its value.
- * @internal exported for testing
- */
-const wrapTextToWidth = (ctx, text, maxWidth, noWrap) => {
-    const lines = [];
-    const paragraphs = text.split('\n');
-    for (const paragraph of paragraphs) {
-        if (noWrap) {
-            lines.push(paragraph);
-            continue;
-        }
-        const words = paragraph.split(/(\s+)/);
-        let line = '';
-        for (const word of words) {
-            const candidate = line + word;
-            if (ctx.measureText(candidate).width <= maxWidth || line === '') {
-                line = candidate;
-            }
-            else {
-                lines.push(line);
-                line = word;
-            }
-        }
-        lines.push(line);
-    }
-    return lines;
-};
-exports.wrapTextToWidth = wrapTextToWidth;
-/**
- * Render list-item marker (image or text).
- */
-async function renderListMarker(ctx, context, textRenderer, paint, container, styles) {
-    if (!(0, bitwise_1.contains)(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) {
-        return;
-    }
-    if (container.styles.listStyleImage !== null) {
-        const img = container.styles.listStyleImage;
-        if (img.type === 0 /* CSSImageType.URL */) {
-            const url = img.url;
-            try {
-                const image = await context.cache.match(url);
-                ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
-            }
-            catch (e) {
-                context.logger.error(`Error loading list-style-image ${url}`);
-                context.onError?.(e instanceof Error ? e : new Error(String(e)));
-            }
-        }
-    }
-    else if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
-        const [font] = textRenderer.createFontStyle(styles);
-        ctx.font = font;
-        ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-        ctx.textBaseline = 'middle';
-        ctx.textAlign = 'right';
-        const bounds = new bounds_1.Bounds(container.bounds.left, container.bounds.top + (0, length_percentage_1.getAbsoluteValue)(container.styles.paddingTop, container.bounds.width), container.bounds.width, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 1);
-        textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2, styles.writingMode);
-        ctx.textBaseline = 'bottom';
-        ctx.textAlign = 'left';
-    }
-}
-/**
- * Type guard for text input containers.
- */
-const isTextInputElement = (container) => {
-    if (container instanceof textarea_element_container_1.TextareaElementContainer) {
-        return true;
-    }
-    else if (container instanceof select_element_container_1.SelectElementContainer) {
-        return true;
-    }
-    else if (container instanceof input_element_container_1.InputElementContainer && container.type !== input_element_container_1.RADIO && container.type !== input_element_container_1.CHECKBOX) {
-        return true;
-    }
-    return false;
-};
-/**
- * Map CSS text-align to Canvas textAlign.
- */
-const canvasTextAlign = (textAlign) => {
-    switch (textAlign) {
-        case 1 /* TEXT_ALIGN.CENTER */:
-            return 'center';
-        case 2 /* TEXT_ALIGN.RIGHT */:
-            return 'right';
-        case 0 /* TEXT_ALIGN.LEFT */:
-        default:
-            return 'left';
-    }
-};

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

@@ -1,171 +0,0 @@
-"use strict";
-/**
- * Effects Renderer
- *
- * Handles rendering effects including:
- * - Opacity effects
- * - Transform effects (matrix transformations)
- * - Clip effects (overflow / border-radius clipping via Path[])
- * - Clip-path effects (CSS clip-path shapes: inset, circle, ellipse, polygon, path)
- * - Blend effects (mix-blend-mode)
- * - Filter effects (CSS filter functions)
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EffectsRenderer = void 0;
-const effects_1 = require("../effects");
-/**
- * Effects Renderer
- *
- * Manages rendering effects stack including opacity, transforms, and clipping.
- * Extracted from CanvasRenderer to improve code organization and maintainability.
- *
- * ## Save/restore optimisation
- *
- * Canvas `save()` / `restore()` snapshot and restore the entire canvas state
- * (transform matrix, clip region, compositing mode, filter, shadow, …) which
- * is relatively expensive. The old implementation called `save()` / `restore()`
- * for every single effect unconditionally.
- *
- * This implementation does a **batch pre-scan** before applying effects:
- *
- * | Effect type        | Modifies             | Reversible?   | Needs save? |
- * |--------------------|----------------------|---------------|-------------|
- * | TransformEffect     | transform matrix     | ❌ irreversible | **YES**     |
- * | ClipEffect         | clip region          | ❌ cumulative   | **YES**     |
- * | ClipPathEffect     | clip region          | ❌ cumulative   | **YES**     |
- * | OpacityEffect      | globalAlpha          | ✅ scalar       | NO          |
- * | BlendEffect        | globalCompositeOp    | ✅ scalar       | NO          |
- * | FilterEffect       | filter + shadow      | ✅ string+vec   | NO          |
- *
- * When the batch contains *only* lightweight effects (opacity / blend / filter)
- * we skip `save()` entirely and manually reset properties on pop.
- *
- * When the batch contains at least one heavyweight effect (transform / clip /
- * clip-path) we call `save()` **once** before the first heavyweight effect and
- * `restore()` **once** when that effect is popped.
- */
-class EffectsRenderer {
-    constructor(deps, pathCallback) {
-        this.activeEffects = [];
-        /** Whether a canvas state save was performed for the current batch. */
-        this.didSave = false;
-        /** Index (0-based, from start of activeEffects array) of the last
-         *  heavyweight effect in the batch — the one whose pop triggers
-         *  restore(). Set to -1 when no save was performed. */
-        this.saveAtDepth = -1;
-        this.ctx = deps.ctx;
-        this.pathCallback = pathCallback;
-    }
-    /**
-     * Apply multiple effects.
-     * Clears existing effects and applies new ones.
-     */
-    applyEffects(effects) {
-        // ── 1. Pop all previously active effects ──────────────────────
-        while (this.activeEffects.length) {
-            this.popEffect();
-        }
-        // ── 2. Determine whether to save canvas state ─────────────────
-        this.didSave = false;
-        this.saveAtDepth = -1;
-        const isHeavy = (e) => (0, effects_1.isTransformEffect)(e) || (0, effects_1.isClipEffect)(e) || (0, effects_1.isClipPathEffect)(e);
-        // Pre-compute the index of the *last* heavyweight effect so pop
-        // can reliably match it regardless of how many heavyweight effects
-        // are in the batch (the save was issued before the first, but the
-        // restore must happen when the LAST heavyweight is popped).
-        const lastHeavyIdx = effects.reduceRight((found, e, idx) => (found !== -1 ? found : isHeavy(e) ? idx : -1), -1);
-        // ── 3. Apply each effect ──────────────────────────────────────
-        for (let i = 0; i < effects.length; i++) {
-            const effect = effects[i];
-            if (isHeavy(effect)) {
-                if (!this.didSave) {
-                    this.ctx.save();
-                    this.didSave = true;
-                }
-                if (i === lastHeavyIdx) {
-                    this.saveAtDepth = this.activeEffects.length;
-                }
-            }
-            this.applyEffect(effect);
-        }
-    }
-    /**
-     * Apply a single effect (called internally by applyEffects).
-     */
-    applyEffect(effect) {
-        if ((0, effects_1.isTransformEffect)(effect)) {
-            this.ctx.translate(effect.offsetX, effect.offsetY);
-            this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
-            this.ctx.translate(-effect.offsetX, -effect.offsetY);
-        }
-        else if ((0, effects_1.isClipEffect)(effect)) {
-            this.pathCallback.path(effect.path);
-            this.ctx.clip();
-        }
-        else if ((0, effects_1.isClipPathEffect)(effect)) {
-            effect.applyClip(this.ctx);
-        }
-        else if ((0, effects_1.isOpacityEffect)(effect)) {
-            // Multiply into current globalAlpha so nested opacity works
-            // without save/restore overhead.
-            this.ctx.globalAlpha *= effect.opacity;
-        }
-        else if ((0, effects_1.isBlendEffect)(effect)) {
-            this.ctx.globalCompositeOperation = effect.compositeOperation;
-        }
-        else if ((0, effects_1.isFilterEffect)(effect)) {
-            // drop-shadow() is rendered via ctx.shadow* to avoid canvas
-            // taint; remaining filters go through ctx.filter.
-            this.ctx.filter = effect.safeFilterString || 'none';
-            if (effect.shadow) {
-                this.ctx.shadowOffsetX = effect.shadow.offsetX;
-                this.ctx.shadowOffsetY = effect.shadow.offsetY;
-                this.ctx.shadowBlur = effect.shadow.blur;
-                this.ctx.shadowColor = effect.shadow.color;
-            }
-        }
-        this.activeEffects.push(effect);
-    }
-    /**
-     * Remove the most recent effect.
-     * Restores canvas state if needed.
-     */
-    popEffect() {
-        if (this.activeEffects.length === 0)
-            return;
-        // If the effect being popped is the one that triggered the save,
-        // restore the canvas state now.
-        if (this.didSave && this.activeEffects.length - 1 === this.saveAtDepth) {
-            this.ctx.restore();
-            this.didSave = false;
-            this.saveAtDepth = -1;
-        }
-        this.activeEffects.pop();
-        // If the batch had ONLY lightweight effects (no save was performed),
-        // reset properties to their defaults. We only do this when all effects
-        // have been popped (activeEffects is empty), so properties don't
-        // flip mid-batch.
-        if (!this.didSave && this.activeEffects.length === 0) {
-            this.ctx.globalAlpha = 1;
-            this.ctx.globalCompositeOperation = 'source-over';
-            this.ctx.filter = 'none';
-            this.ctx.shadowOffsetX = 0;
-            this.ctx.shadowOffsetY = 0;
-            this.ctx.shadowBlur = 0;
-            this.ctx.shadowColor = 'rgba(0, 0, 0, 0)';
-        }
-    }
-    /**
-     * Get the current number of active effects.
-     */
-    getActiveEffectCount() {
-        return this.activeEffects.length;
-    }
-    /**
-     * Check if there are any active effects.
-     */
-    hasActiveEffects() {
-        return this.activeEffects.length > 0;
-    }
-}
-exports.EffectsRenderer = EffectsRenderer;