html2canvas-pro 1.6.6 → 2.0.0

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

@@ -0,0 +1,222 @@
+"use strict";
+/**
+ * Background Renderer
+ *
+ * Handles rendering of element backgrounds including:
+ * - Background colors
+ * - Background images (URL)
+ * - Linear gradients
+ * - Radial gradients
+ * - Background patterns and repeats
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundRenderer = void 0;
+const image_1 = require("../../css/types/image");
+const background_1 = require("../background");
+const gradient_1 = require("../../css/types/functions/gradient");
+const length_percentage_1 = require("../../css/types/length-percentage");
+const color_utilities_1 = require("../../css/types/color-utilities");
+const bezier_curve_1 = require("../bezier-curve");
+const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
+/**
+ * Background Renderer
+ *
+ * Specialized renderer for element backgrounds.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class BackgroundRenderer {
+    constructor(deps) {
+        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
+     * Supports URL images, linear gradients, and radial gradients
+     *
+     * @param container - Element container with background styles
+     */
+    async renderBackgroundImage(container) {
+        let index = container.styles.backgroundImage.length - 1;
+        for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
+            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.isRadialGradient)(backgroundImage)) {
+                this.renderRadialGradient(container, backgroundImage, index);
+            }
+            index--;
+        }
+    }
+    /**
+     * Render a URL-based background image
+     */
+    async renderBackgroundURLImage(container, backgroundImage, index) {
+        let image;
+        const url = backgroundImage.url;
+        try {
+            image = await this.context.cache.match(url);
+        }
+        catch (e) {
+            this.context.logger.error(`Error loading background-image ${url}`);
+        }
+        if (image) {
+            const imageWidth = isNaN(image.width) || image.width === 0 ? 1 : image.width;
+            const imageHeight = isNaN(image.height) || image.height === 0 ? 1 : image.height;
+            const [path, x, y, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [
+                imageWidth,
+                imageHeight,
+                imageWidth / imageHeight
+            ]);
+            const pattern = this.ctx.createPattern(this.resizeImage(image, width, height, container.styles.imageRendering), 'repeat');
+            this.renderRepeat(path, pattern, x, y);
+        }
+    }
+    /**
+     * Render a linear gradient background
+     */
+    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');
+        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');
+            this.renderRepeat(path, pattern, x, y);
+        }
+    }
+    /**
+     * Render a radial gradient background
+     */
+    renderRadialGradient(container, backgroundImage, index) {
+        const [path, left, top, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [null, null, null]);
+        const position = backgroundImage.position.length === 0 ? [length_percentage_1.FIFTY_PERCENT] : backgroundImage.position;
+        const x = (0, length_percentage_1.getAbsoluteValue)(position[0], width);
+        const y = (0, length_percentage_1.getAbsoluteValue)(position[position.length - 1], height);
+        let [rx, ry] = (0, gradient_1.calculateRadius)(backgroundImage, x, y, width, height);
+        // Handle edge case where radial gradient size is 0
+        // Use a minimum value of 0.01 to ensure gradient is still rendered
+        if (rx === 0 || ry === 0) {
+            rx = Math.max(rx, 0.01);
+            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;
+                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.restore();
+            }
+            else {
+                this.ctx.fill();
+            }
+        }
+    }
+    /**
+     * Render a repeating pattern with offset
+     *
+     * @param path - Path to fill
+     * @param pattern - Canvas pattern or gradient
+     * @param offsetX - X offset for pattern
+     * @param offsetY - Y offset for pattern
+     */
+    renderRepeat(path, pattern, offsetX, offsetY) {
+        this.path(path);
+        this.ctx.fillStyle = pattern;
+        this.ctx.translate(offsetX, offsetY);
+        this.ctx.fill();
+        this.ctx.translate(-offsetX, -offsetY);
+    }
+    /**
+     * Resize an image to target dimensions
+     *
+     * @param image - Source image
+     * @param width - Target width
+     * @param height - Target height
+     * @param imageRendering - CSS image-rendering property value
+     * @returns Resized canvas or original image
+     */
+    resizeImage(image, width, height, imageRendering) {
+        // https://github.com/niklasvh/html2canvas/pull/2911
+        // if (image.width === width && image.height === height) {
+        //     return image;
+        // }
+        const ownerDocument = this.canvas.ownerDocument ?? document;
+        const canvas = ownerDocument.createElement('canvas');
+        canvas.width = Math.max(1, width);
+        canvas.height = Math.max(1, height);
+        const ctx = canvas.getContext('2d');
+        // Apply image smoothing based on CSS image-rendering property
+        if (imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED || imageRendering === image_rendering_1.IMAGE_RENDERING.CRISP_EDGES) {
+            this.context.logger.debug(`Disabling image smoothing for background image due to CSS image-rendering`);
+            ctx.imageSmoothingEnabled = false;
+        }
+        else if (imageRendering === image_rendering_1.IMAGE_RENDERING.SMOOTH) {
+            this.context.logger.debug(`Enabling image smoothing for background image due to CSS image-rendering: smooth`);
+            ctx.imageSmoothingEnabled = true;
+        }
+        else {
+            // AUTO: inherit from main renderer context
+            ctx.imageSmoothingEnabled = this.ctx.imageSmoothingEnabled;
+        }
+        // Inherit quality setting
+        if (this.ctx.imageSmoothingQuality) {
+            ctx.imageSmoothingQuality = this.ctx.imageSmoothingQuality;
+        }
+        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
+        return canvas;
+    }
+    /**
+     * Create a canvas path from path array
+     *
+     * @param paths - Array of path points
+     */
+    path(paths) {
+        this.ctx.beginPath();
+        this.formatPath(paths);
+        this.ctx.closePath();
+    }
+    /**
+     * Format path points into canvas path
+     *
+     * @param paths - Array of path points
+     */
+    formatPath(paths) {
+        paths.forEach((point, index) => {
+            const start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
+            if (index === 0) {
+                this.ctx.moveTo(start.x, start.y);
+            }
+            else {
+                this.ctx.lineTo(start.x, start.y);
+            }
+            if ((0, bezier_curve_1.isBezierCurve)(point)) {
+                this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+            }
+        });
+    }
+}
+exports.BackgroundRenderer = BackgroundRenderer;
+//# sourceMappingURL=background-renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"background-renderer.js","sourceRoot":"","sources":["../../../../src/render/canvas/background-renderer.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,185 @@
+"use strict";
+/**
+ * Border Renderer
+ *
+ * Handles rendering of element borders including:
+ * - Solid borders
+ * - Double borders
+ * - Dashed borders
+ * - Dotted borders
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderRenderer = void 0;
+const color_utilities_1 = require("../../css/types/color-utilities");
+const border_1 = require("../border");
+const bezier_curve_1 = require("../bezier-curve");
+const vector_1 = require("../vector");
+/**
+ * Border Renderer
+ *
+ * Specialized renderer for element borders.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class BorderRenderer {
+    constructor(deps, pathCallbacks) {
+        this.ctx = deps.ctx;
+        this.pathCallbacks = pathCallbacks;
+    }
+    /**
+     * Render a solid border
+     *
+     * @param color - Border color
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     */
+    async renderSolidBorder(color, side, curvePoints) {
+        this.pathCallbacks.path((0, border_1.parsePathForBorder)(curvePoints, side));
+        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
+        this.ctx.fill();
+    }
+    /**
+     * Render a double border
+     * Falls back to solid border if width is too small
+     *
+     * @param color - Border color
+     * @param width - Border width
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     */
+    async renderDoubleBorder(color, width, side, curvePoints) {
+        if (width < 3) {
+            await this.renderSolidBorder(color, side, curvePoints);
+            return;
+        }
+        const outerPaths = (0, border_1.parsePathForBorderDoubleOuter)(curvePoints, side);
+        this.pathCallbacks.path(outerPaths);
+        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
+        this.ctx.fill();
+        const innerPaths = (0, border_1.parsePathForBorderDoubleInner)(curvePoints, side);
+        this.pathCallbacks.path(innerPaths);
+        this.ctx.fill();
+    }
+    /**
+     * Render a dashed or dotted border
+     *
+     * @param color - Border color
+     * @param width - Border width
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     * @param style - Border style (DASHED or DOTTED)
+     */
+    async renderDashedDottedBorder(color, width, side, curvePoints, style) {
+        this.ctx.save();
+        const strokePaths = (0, border_1.parsePathForBorderStroke)(curvePoints, side);
+        const boxPaths = (0, border_1.parsePathForBorder)(curvePoints, side);
+        if (style === 2 /* BORDER_STYLE.DASHED */) {
+            this.pathCallbacks.path(boxPaths);
+            this.ctx.clip();
+        }
+        // Extract start and end coordinates
+        let startX, startY, endX, endY;
+        if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
+            startX = boxPaths[0].start.x;
+            startY = boxPaths[0].start.y;
+        }
+        else {
+            startX = boxPaths[0].x;
+            startY = boxPaths[0].y;
+        }
+        if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
+            endX = boxPaths[1].end.x;
+            endY = boxPaths[1].end.y;
+        }
+        else {
+            endX = boxPaths[1].x;
+            endY = boxPaths[1].y;
+        }
+        // Calculate border length
+        let length;
+        if (side === 0 || side === 2) {
+            length = Math.abs(startX - endX);
+        }
+        else {
+            length = Math.abs(startY - endY);
+        }
+        this.ctx.beginPath();
+        if (style === 3 /* BORDER_STYLE.DOTTED */) {
+            this.pathCallbacks.formatPath(strokePaths);
+        }
+        else {
+            this.pathCallbacks.formatPath(boxPaths.slice(0, 2));
+        }
+        // Calculate dash and space lengths
+        let dashLength = width < 3 ? width * 3 : width * 2;
+        let spaceLength = width < 3 ? width * 2 : width;
+        if (style === 3 /* BORDER_STYLE.DOTTED */) {
+            dashLength = width;
+            spaceLength = width;
+        }
+        // Adjust dash pattern for border length
+        let useLineDash = true;
+        if (length <= dashLength * 2) {
+            useLineDash = false;
+        }
+        else if (length <= dashLength * 2 + spaceLength) {
+            const multiplier = length / (2 * dashLength + spaceLength);
+            dashLength *= multiplier;
+            spaceLength *= multiplier;
+        }
+        else {
+            const numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
+            const minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
+            const maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
+            spaceLength =
+                maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
+                    ? minSpace
+                    : maxSpace;
+        }
+        // Apply line dash pattern
+        if (useLineDash) {
+            if (style === 3 /* BORDER_STYLE.DOTTED */) {
+                this.ctx.setLineDash([0, dashLength + spaceLength]);
+            }
+            else {
+                this.ctx.setLineDash([dashLength, spaceLength]);
+            }
+        }
+        // Set line style and stroke
+        if (style === 3 /* BORDER_STYLE.DOTTED */) {
+            this.ctx.lineCap = 'round';
+            this.ctx.lineWidth = width;
+        }
+        else {
+            this.ctx.lineWidth = width * 2 + 1.1;
+        }
+        this.ctx.strokeStyle = (0, color_utilities_1.asString)(color);
+        this.ctx.stroke();
+        this.ctx.setLineDash([]);
+        // Fill dashed round edge gaps
+        if (style === 2 /* BORDER_STYLE.DASHED */) {
+            if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
+                const path1 = boxPaths[3];
+                const path2 = boxPaths[0];
+                this.ctx.beginPath();
+                this.pathCallbacks.formatPath([
+                    new vector_1.Vector(path1.end.x, path1.end.y),
+                    new vector_1.Vector(path2.start.x, path2.start.y)
+                ]);
+                this.ctx.stroke();
+            }
+            if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
+                const path1 = boxPaths[1];
+                const path2 = boxPaths[2];
+                this.ctx.beginPath();
+                this.pathCallbacks.formatPath([
+                    new vector_1.Vector(path1.end.x, path1.end.y),
+                    new vector_1.Vector(path2.start.x, path2.start.y)
+                ]);
+                this.ctx.stroke();
+            }
+        }
+        this.ctx.restore();
+    }
+}
+exports.BorderRenderer = BorderRenderer;
+//# sourceMappingURL=border-renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"border-renderer.js","sourceRoot":"","sources":["../../../../src/render/canvas/border-renderer.ts"],"names":[],"mappings":"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"}