html2canvas-pro 2.1.1 → 2.2.1

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

@@ -26,10 +26,19 @@ const canvas_path_1 = require("./canvas-path");
  */
 class BackgroundRenderer {
     constructor(deps) {
+        /**
+         * Instance-level LRU cache for background-image patterns.
+         * CanvasPatterns are tied to the rendering context and must not be
+         * shared across different render passes. This cache lives for the
+         * duration of one html2canvas() call.
+         *
+         * Also reused for linear-gradient and repeating-linear-gradient
+         * pattern canvases to avoid redundant offscreen canvas allocation.
+         */
+        this.patternCache = new Map();
         this.ctx = deps.ctx;
         this.context = deps.context;
         this.canvas = deps.canvas;
-        // Options stored in deps but not needed as instance property
     }
     /**
      * Render background images for a container
@@ -39,17 +48,37 @@ class BackgroundRenderer {
      */
     async renderBackgroundImage(container) {
         let index = container.styles.backgroundImage.length - 1;
+        const blendModes = container.styles.backgroundBlendMode;
+        let layerCount = 0;
         for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
+            // Save context and apply blend mode for non-first layers
+            if (layerCount > 0) {
+                const blendMode = blendModes[layerCount] ?? blendModes[0] ?? 'normal';
+                if (blendMode !== 'normal') {
+                    this.ctx.save();
+                    this.ctx.globalCompositeOperation = blendMode;
+                }
+            }
             if (backgroundImage.type === 0 /* CSSImageType.URL */) {
                 await this.renderBackgroundURLImage(container, backgroundImage, index);
             }
             else if ((0, image_1.isLinearGradient)(backgroundImage)) {
                 this.renderLinearGradient(container, backgroundImage, index);
             }
+            else if ((0, image_1.isRepeatingLinearGradient)(backgroundImage)) {
+                this.renderRepeatingLinearGradient(container, backgroundImage, index);
+            }
             else if ((0, image_1.isRadialGradient)(backgroundImage)) {
                 this.renderRadialGradient(container, backgroundImage, index);
             }
+            if (layerCount > 0) {
+                const blendMode = blendModes[layerCount] ?? blendModes[0] ?? 'normal';
+                if (blendMode !== 'normal') {
+                    this.ctx.restore();
+                }
+            }
             index--;
+            layerCount++;
         }
     }
     /**
@@ -63,6 +92,7 @@ class BackgroundRenderer {
         }
         catch (e) {
             this.context.logger.error(`Error loading background-image ${url}`);
+            this.context.onError?.(e instanceof Error ? e : new Error(String(e)));
         }
         if (image) {
             const imageWidth = isNaN(image.width) || image.width === 0 ? 1 : image.width;
@@ -72,7 +102,71 @@ class BackgroundRenderer {
                 imageHeight,
                 imageWidth / imageHeight
             ]);
-            const pattern = this.ctx.createPattern(this.resizeImage(image, width, height, container.styles.imageRendering), 'repeat');
+            // Cache key: URL + resized dimensions + imageRendering (pattern is dependent on all three)
+            const cacheKey = `${url}|${Math.round(width)}x${Math.round(height)}|${container.styles.imageRendering}`;
+            let pattern = this.lruGet(this.patternCache, cacheKey);
+            if (!pattern) {
+                const resized = this.resizeImage(image, width, height, container.styles.imageRendering);
+                pattern = this.ctx.createPattern(resized, 'repeat');
+                this.lruSet(this.patternCache, cacheKey, pattern);
+            }
+            this.renderRepeat(path, pattern, x, y);
+        }
+    }
+    /**
+     * Render a repeating linear gradient background.
+     * Renders one cycle of the gradient to a pattern canvas, then fills
+     * the background area using createPattern('repeat').
+     */
+    renderRepeatingLinearGradient(container, backgroundImage, index) {
+        const [path, x, y, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [null, null, null]);
+        const [lineLength, x0, x1, y0, y1] = (0, gradient_1.calculateGradientDirection)(backgroundImage.angle, width, height);
+        // Determine the repeating pattern length from color stops
+        const processedStops = (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength || 1);
+        const lastStop = processedStops[processedStops.length - 1];
+        const firstStop = processedStops[0];
+        const patternLength = lastStop.stop - firstStop.stop;
+        if (patternLength <= 0) {
+            // Fallback: render as normal linear gradient
+            this.renderLinearGradient(container, backgroundImage, index);
+            return;
+        }
+        // Scale direction vectors to match the pattern length
+        const dirX = x1 - x0;
+        const dirY = y1 - y0;
+        const totalLength = Math.sqrt(dirX * dirX + dirY * dirY);
+        const scale = patternLength / (totalLength || 1);
+        const pX0 = x0;
+        const pY0 = y0;
+        const pX1 = x0 + dirX * scale;
+        const pY1 = y0 + dirY * scale;
+        const ownerDocument = this.canvas.ownerDocument ?? document;
+        // Cache key for this repeating gradient pattern
+        const cacheKey = `rlg|${backgroundImage.angle}|${Math.round(patternLength)}|${JSON.stringify(backgroundImage.stops)}`;
+        let pattern = this.lruGet(this.patternCache, cacheKey);
+        if (!pattern) {
+            const canvas = ownerDocument.createElement('canvas');
+            // Create a canvas large enough to hold one full repeating unit
+            const canvasSize = Math.max(1, Math.ceil(patternLength));
+            canvas.width = canvasSize;
+            canvas.height = canvasSize;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return;
+            }
+            const gradient = ctx.createLinearGradient(pX0 - x, pY0 - y, pX1 - x, pY1 - y);
+            // Normalize stops to [0, 1] range for one repeating unit
+            processedStops.forEach((colorStop) => {
+                gradient.addColorStop((colorStop.stop - firstStop.stop) / patternLength, (0, color_utilities_1.asString)(colorStop.color));
+            });
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvasSize, canvasSize);
+            if (canvasSize > 0) {
+                pattern = this.ctx.createPattern(canvas, 'repeat');
+                this.lruSet(this.patternCache, cacheKey, pattern);
+            }
+        }
+        if (pattern) {
             this.renderRepeat(path, pattern, x, y);
         }
     }
@@ -82,20 +176,28 @@ class BackgroundRenderer {
     renderLinearGradient(container, backgroundImage, index) {
         const [path, x, y, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [null, null, null]);
         const [lineLength, x0, x1, y0, y1] = (0, gradient_1.calculateGradientDirection)(backgroundImage.angle, width, height);
-        const ownerDocument = this.canvas.ownerDocument ?? document;
-        const canvas = ownerDocument.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
+        // Cache key: angle + dimensions + serialised colour stops
+        const cacheKey = `lg|${backgroundImage.angle}|${Math.round(width)}x${Math.round(height)}|${JSON.stringify(backgroundImage.stops)}`;
+        let pattern = this.lruGet(this.patternCache, cacheKey);
+        if (!pattern) {
+            const ownerDocument = this.canvas.ownerDocument ?? document;
+            const canvas = ownerDocument.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return;
+            }
+            const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+            (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength || 1).forEach((colorStop) => gradient.addColorStop(colorStop.stop, (0, color_utilities_1.asString)(colorStop.color)));
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+            if (width > 0 && height > 0) {
+                pattern = this.ctx.createPattern(canvas, 'repeat');
+                this.lruSet(this.patternCache, cacheKey, pattern);
+            }
         }
-        const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-        (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength || 1).forEach((colorStop) => gradient.addColorStop(colorStop.stop, (0, color_utilities_1.asString)(colorStop.color)));
-        ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, width, height);
-        if (width > 0 && height > 0) {
-            const pattern = this.ctx.createPattern(canvas, 'repeat');
+        if (pattern) {
             this.renderRepeat(path, pattern, x, y);
         }
     }
@@ -115,26 +217,37 @@ class BackgroundRenderer {
             ry = Math.max(ry, 0.01);
         }
         if (rx > 0 && ry > 0) {
-            const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
-            (0, gradient_1.processColorStops)(backgroundImage.stops, rx * 2).forEach((colorStop) => radialGradient.addColorStop(colorStop.stop, (0, color_utilities_1.asString)(colorStop.color)));
-            this.path(path);
-            this.ctx.fillStyle = radialGradient;
-            if (rx !== ry) {
-                // transforms for elliptical radial gradient
-                const midX = container.bounds.left + 0.5 * container.bounds.width;
-                const midY = container.bounds.top + 0.5 * container.bounds.height;
-                const f = ry / rx;
-                const invF = 1 / f;
+            // Cache key for radial gradient: position + radii + colour stops
+            const cacheKey = `rg|${Math.round(x)}x${Math.round(y)}|${Math.round(rx)}x${Math.round(ry)}|${JSON.stringify(backgroundImage.stops)}`;
+            let pattern = this.lruGet(this.patternCache, cacheKey);
+            if (!pattern) {
+                const ownerDocument = this.canvas.ownerDocument ?? document;
+                const size = Math.ceil(Math.max(rx, ry) * 2);
+                const offscreen = ownerDocument.createElement('canvas');
+                offscreen.width = size;
+                offscreen.height = size;
+                const offCtx = offscreen.getContext('2d');
+                if (offCtx) {
+                    const offRadius = Math.max(rx, ry);
+                    const gradient = offCtx.createRadialGradient(offRadius, offRadius, 0, offRadius, offRadius, offRadius);
+                    (0, gradient_1.processColorStops)(backgroundImage.stops, offRadius * 2).forEach((s) => gradient.addColorStop(s.stop, (0, color_utilities_1.asString)(s.color)));
+                    offCtx.fillStyle = gradient;
+                    if (rx !== ry)
+                        offCtx.scale(1, ry / rx);
+                    offCtx.fillRect(0, 0, offRadius * 2, offRadius * 2);
+                    pattern = this.ctx.createPattern(offscreen, 'no-repeat');
+                    this.lruSet(this.patternCache, cacheKey, pattern);
+                }
+            }
+            if (pattern) {
+                this.path(path);
                 this.ctx.save();
-                this.ctx.translate(midX, midY);
-                this.ctx.transform(1, 0, 0, f, 0, 0);
-                this.ctx.translate(-midX, -midY);
-                this.ctx.fillRect(left, invF * (top - midY) + midY, width, height * invF);
+                this.ctx.clip();
+                this.ctx.translate(left + x - Math.max(rx, ry), top + y - Math.max(rx, ry));
+                this.ctx.fillStyle = pattern;
+                this.ctx.fillRect(0, 0, Math.max(rx, ry) * 2, Math.max(rx, ry) * 2);
                 this.ctx.restore();
             }
-            else {
-                this.ctx.fill();
-            }
         }
     }
     /**
@@ -202,5 +315,25 @@ class BackgroundRenderer {
     path(paths) {
         (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
     }
+    /**
+     * LRU-aware get: returns value and promotes the entry to end of Map.
+     */
+    lruGet(cache, key) {
+        const value = cache.get(key);
+        if (value !== undefined) {
+            cache.delete(key);
+            cache.set(key, value);
+        }
+        return value;
+    }
+    /** LRU-aware set for CanvasPattern caches. Evicts oldest entry on overflow. */
+    lruSet(cache, key, value) {
+        if (cache.size >= BackgroundRenderer.PATTERN_CACHE_MAX) {
+            const oldestKey = cache.keys().next().value;
+            cache.delete(oldestKey);
+        }
+        cache.set(key, value);
+    }
 }
 exports.BackgroundRenderer = BackgroundRenderer;
+BackgroundRenderer.PATTERN_CACHE_MAX = 50;

package/dist/lib/render/canvas/border-image-renderer.js

@@ -0,0 +1,153 @@
+"use strict";
+/**
+ * Border Image Renderer
+ *
+ * Renders CSS border-image using 9-slice scaling.
+ * The source image is divided into 9 regions (4 corners, 4 edges, 1 center)
+ * based on border-image-slice values, then each region is drawn to the
+ * corresponding area of the element's border box.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderImageRenderer = void 0;
+const border_image_repeat_1 = require("../../css/property-descriptors/border-image-repeat");
+class BorderImageRenderer {
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    renderBorderImage(bounds, image, slice, repeat, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth) {
+        const imgW = image.naturalWidth || image.width;
+        const imgH = image.naturalHeight || image.height;
+        if (imgW <= 0 || imgH <= 0) {
+            return;
+        }
+        // Calculate source slice positions in image pixel space
+        const sT = Math.min(slice.unit === 'percent' ? (slice.top / 100) * imgH : Math.min(slice.top, imgH), imgH);
+        const sR = Math.min(slice.unit === 'percent' ? (slice.right / 100) * imgW : Math.min(slice.right, imgW), imgW);
+        const sB = Math.min(slice.unit === 'percent' ? (slice.bottom / 100) * imgH : Math.min(slice.bottom, imgH), imgH);
+        const sL = Math.min(slice.unit === 'percent' ? (slice.left / 100) * imgW : Math.min(slice.left, imgW), imgW);
+        const { left, top, width, height } = bounds;
+        if (width <= 0 || height <= 0) {
+            return;
+        }
+        // Clamp border widths to available box dimensions
+        const dT = Math.min(borderTopWidth, height);
+        const dR = Math.min(borderRightWidth, width);
+        const dB = Math.min(borderBottomWidth, height - dT);
+        const dL = Math.min(borderLeftWidth, width - dR);
+        // Draw corners
+        this.drawRegion(image, 0, 0, sL, sT, left, top, dL, dT);
+        this.drawRegion(image, imgW - sR, 0, sR, sT, left + width - dR, top, dR, dT);
+        this.drawRegion(image, imgW - sR, imgH - sB, sR, sB, left + width - dR, top + height - dB, dR, dB);
+        this.drawRegion(image, 0, imgH - sB, sL, sB, left, top + height - dB, dL, dB);
+        // Draw edges
+        const edges = [
+            {
+                sx: sL,
+                sy: 0,
+                sw: imgW - sL - sR,
+                sh: sT,
+                dx: left + dL,
+                dy: top,
+                dw: width - dL - dR,
+                dh: dT,
+                repeat: repeat.horizontal
+            },
+            {
+                sx: imgW - sR,
+                sy: sT,
+                sw: sR,
+                sh: imgH - sT - sB,
+                dx: left + width - dR,
+                dy: top + dT,
+                dw: dR,
+                dh: height - dT - dB,
+                repeat: repeat.vertical
+            },
+            {
+                sx: sL,
+                sy: imgH - sB,
+                sw: imgW - sL - sR,
+                sh: sB,
+                dx: left + dL,
+                dy: top + height - dB,
+                dw: width - dL - dR,
+                dh: dB,
+                repeat: repeat.horizontal
+            },
+            {
+                sx: 0,
+                sy: sT,
+                sw: sL,
+                sh: imgH - sT - sB,
+                dx: left,
+                dy: top + dT,
+                dw: dL,
+                dh: height - dT - dB,
+                repeat: repeat.vertical
+            }
+        ];
+        for (const edge of edges) {
+            if (edge.sw <= 0 || edge.sh <= 0 || edge.dw <= 0 || edge.dh <= 0)
+                continue;
+            const isHorizontal = edge.dw >= edge.dh;
+            if (edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.STRETCH) {
+                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx, edge.dy, edge.dw, edge.dh);
+            }
+            else if (edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.REPEAT || edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.ROUND) {
+                this.drawRepeatedEdge(image, edge, isHorizontal, edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.ROUND);
+            }
+        }
+        // Draw center if fill is specified
+        if (slice.fill) {
+            const cx = sL;
+            const cy = sT;
+            const cw = imgW - sL - sR;
+            const ch = imgH - sT - sB;
+            const tcx = left + dL;
+            const tcy = top + dT;
+            const tcw = width - dL - dR;
+            const tch = height - dT - dB;
+            this.drawRegion(image, cx, cy, cw, ch, tcx, tcy, tcw, tch);
+        }
+    }
+    drawRegion(image, sx, sy, sw, sh, dx, dy, dw, dh) {
+        if (sw > 0 && sh > 0 && dw > 0 && dh > 0) {
+            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
+        }
+    }
+    drawRepeatedEdge(image, edge, isHorizontal, round) {
+        const srcLength = isHorizontal ? edge.sw : edge.sh;
+        const tgLength = isHorizontal ? edge.dw : edge.dh;
+        if (srcLength <= 0 || tgLength <= 0)
+            return;
+        let tileSize;
+        let tileCount;
+        if (round) {
+            tileCount = Math.max(1, Math.round(tgLength / srcLength));
+            tileSize = tgLength / tileCount;
+        }
+        else {
+            tileSize = srcLength;
+            tileCount = Math.ceil(tgLength / tileSize);
+        }
+        this.ctx.save();
+        this.ctx.beginPath();
+        this.ctx.rect(edge.dx, edge.dy, edge.dw, edge.dh);
+        this.ctx.clip();
+        for (let i = 0; i < tileCount; i++) {
+            const offset = i * tileSize;
+            const remaining = tgLength - offset;
+            const clampedSize = Math.min(tileSize, remaining);
+            if (clampedSize <= 0)
+                break;
+            if (isHorizontal) {
+                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx + offset, edge.dy, clampedSize, edge.dh);
+            }
+            else {
+                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx, edge.dy + offset, edge.dw, clampedSize);
+            }
+        }
+        this.ctx.restore();
+    }
+}
+exports.BorderImageRenderer = BorderImageRenderer;