html2canvas-pro 2.0.3 → 2.1.0

package/src/render/canvas/effects-renderer.ts

@@ -0,0 +1,130 @@
+/**
+ * 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)
+ */
+
+import {
+    IElementEffect,
+    isBlendEffect,
+    isClipEffect,
+    isClipPathEffect,
+    isOpacityEffect,
+    isTransformEffect
+} from '../effects';
+import { Path } from '../path';
+
+/**
+ * Dependencies required for EffectsRenderer
+ */
+export interface EffectsRendererDependencies {
+    ctx: CanvasRenderingContext2D;
+}
+
+/**
+ * Path callback for clip effects
+ */
+export interface EffectsPathCallback {
+    path(paths: Path[]): void;
+}
+
+/**
+ * Effects Renderer
+ *
+ * Manages rendering effects stack including opacity, transforms, and clipping.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+export class EffectsRenderer {
+    private readonly ctx: CanvasRenderingContext2D;
+    private readonly pathCallback: EffectsPathCallback;
+    private readonly activeEffects: IElementEffect[] = [];
+
+    constructor(deps: EffectsRendererDependencies, pathCallback: EffectsPathCallback) {
+        this.ctx = deps.ctx;
+        this.pathCallback = pathCallback;
+    }
+
+    /**
+     * Apply multiple effects
+     * Clears existing effects and applies new ones
+     *
+     * @param effects - Array of effects to apply
+     */
+    applyEffects(effects: IElementEffect[]): void {
+        // Clear all existing effects
+        while (this.activeEffects.length) {
+            this.popEffect();
+        }
+
+        // Apply new effects
+        effects.forEach((effect) => this.applyEffect(effect));
+    }
+
+    /**
+     * Apply a single effect
+     *
+     * @param effect - Effect to apply
+     */
+    applyEffect(effect: IElementEffect): void {
+        this.ctx.save();
+
+        if (isOpacityEffect(effect)) {
+            // Opacity: multiply into the current global alpha for nested transparency.
+            this.ctx.globalAlpha = effect.opacity;
+        } else if (isTransformEffect(effect)) {
+            // Transform: translate to origin, apply matrix, translate back.
+            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 (isClipEffect(effect)) {
+            // Clip (overflow / border-radius): build path via callback then clip.
+            this.pathCallback.path(effect.path);
+            this.ctx.clip();
+        } else if (isClipPathEffect(effect)) {
+            // Clip-path: delegate shape drawing (beginPath … clip()) to the effect.
+            effect.applyClip(this.ctx);
+        } else if (isBlendEffect(effect)) {
+            this.ctx.globalCompositeOperation = effect.compositeOperation;
+        }
+
+        this.activeEffects.push(effect);
+    }
+
+    /**
+     * Remove the most recent effect
+     * Restores the canvas state before the effect was applied
+     */
+    popEffect(): void {
+        this.activeEffects.pop();
+        this.ctx.restore();
+    }
+
+    /**
+     * Get the current number of active effects
+     *
+     * @returns Number of active effects
+     */
+    getActiveEffectCount(): number {
+        return this.activeEffects.length;
+    }
+
+    /**
+     * Check if there are any active effects
+     *
+     * @returns True if there are active effects
+     */
+    hasActiveEffects(): boolean {
+        return this.activeEffects.length > 0;
+    }
+}

package/src/render/canvas/foreignobject-renderer.ts

@@ -0,0 +1,53 @@
+import { RenderConfigurations } from './canvas-renderer';
+import { createForeignObjectSVG, loadSerializedSVG } from '../../core/features';
+import { asString } from '../../css/types/color-utilities';
+import { Context } from '../../core/context';
+
+export class ForeignObjectRenderer {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    options: RenderConfigurations;
+    private readonly context: Context;
+
+    constructor(context: Context, options: RenderConfigurations) {
+        this.context = context;
+        this.options = options;
+        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
+        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: HTMLElement): Promise<HTMLCanvasElement> {
+        if (this.options.signal?.aborted) {
+            throw new DOMException('The operation was aborted.', 'AbortError');
+        }
+
+        const svg = createForeignObjectSVG(
+            this.options.width * this.options.scale,
+            this.options.height * this.options.scale,
+            this.options.scale,
+            this.options.scale,
+            element
+        );
+
+        const img = await loadSerializedSVG(svg);
+
+        if (this.options.backgroundColor) {
+            this.ctx.fillStyle = 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;
+    }
+}