html2canvas-pro 2.4.4 → 2.4.5

package/dist/lib/render/canvas/box-shadow-geometry.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spreadShadowPath = exports.shadowRadius = void 0;
+const bezier_curve_1 = require("../bezier-curve");
+const vector_1 = require("../vector");
+// CSS Backgrounds 3, 6.1.1: growing a small corner needs the cubic adjustment
+// to approach a square continuously as the original radius approaches zero.
+const shadowRadius = (radius, spread) => {
+    const delta = spread > radius ? spread * (1 + Math.pow(radius / spread - 1, 3)) : spread;
+    return Math.max(0, radius + delta);
+};
+exports.shadowRadius = shadowRadius;
+// Input is the four clockwise border/padding corner segments from BoundCurves.
+// Translation alone preserves the old radii and turns a spread circle into a
+// rounded square. Resize each quarter ellipse around its box corner instead.
+const spreadShadowPath = (paths, spread) => {
+    if (spread === 0)
+        return paths;
+    const corners = paths.map((point, index) => {
+        if (!(0, bezier_curve_1.isBezierCurve)(point))
+            return { x: point.x, y: point.y, rx: 0, ry: 0 };
+        return {
+            x: index % 2 === 0 ? point.start.x : point.end.x,
+            y: index % 2 === 0 ? point.end.y : point.start.y,
+            rx: Math.abs(point.end.x - point.start.x),
+            ry: Math.abs(point.end.y - point.start.y)
+        };
+    });
+    const width = corners[1].x - corners[0].x + 2 * spread;
+    const height = corners[3].y - corners[0].y + 2 * spread;
+    if (width <= 0 || height <= 0)
+        return [];
+    const radii = corners.map((c) => ({ x: (0, exports.shadowRadius)(c.rx, spread), y: (0, exports.shadowRadius)(c.ry, spread) }));
+    const ratio = (size, sum) => (sum > 0 ? size / sum : 1);
+    const factor = Math.min(1, ratio(width, radii[0].x + radii[1].x), ratio(width, radii[3].x + radii[2].x), ratio(height, radii[0].y + radii[3].y), ratio(height, radii[1].y + radii[2].y));
+    return paths.map((point, index) => {
+        const corner = corners[index];
+        const x = corner.x + (index === 1 || index === 2 ? spread : -spread);
+        const y = corner.y + (index >= 2 ? spread : -spread);
+        if (!(0, bezier_curve_1.isBezierCurve)(point))
+            return new vector_1.Vector(x, y);
+        const rx = radii[index].x * factor;
+        const ry = radii[index].y * factor;
+        if (!rx || !ry)
+            return new vector_1.Vector(x, y);
+        const sx = rx / corner.rx;
+        const sy = ry / corner.ry;
+        const resize = (v) => new vector_1.Vector(x + (v.x - corner.x) * sx, y + (v.y - corner.y) * sy);
+        return new bezier_curve_1.BezierCurve(resize(point.start), resize(point.startControl), resize(point.endControl), resize(point.end));
+    });
+};
+exports.spreadShadowPath = spreadShadowPath;

package/dist/lib/render/canvas/box-shadow-painter.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paintBoxShadow = void 0;
+const color_utilities_1 = require("../../css/types/color-utilities");
+const constants_1 = require("../../core/constants");
+const bound_curves_1 = require("../bound-curves");
+const box_sizing_1 = require("../box-sizing");
+const path_1 = require("../path");
+const canvas_path_1 = require("./canvas-path");
+const filter_surface_1 = require("./filter-surface");
+const surface_bounds_1 = require("./surface-bounds");
+const box_shadow_geometry_1 = require("./box-shadow-geometry");
+const box_shadow_transform_1 = require("./box-shadow-transform");
+// Separate closed subpaths plus even-odd filling avoid reversing only the order
+// of corner Beziers, which does not reverse the curves themselves.
+const complement = (ctx, rect, hole) => {
+    ctx.beginPath();
+    ctx.rect(rect.left, rect.top, rect.width, rect.height);
+    if (hole.length) {
+        (0, canvas_path_1.formatCanvasPath)(ctx, hole);
+        ctx.closePath();
+    }
+};
+const insetHole = (paint, shadow) => {
+    const spread = shadow.spread.number;
+    const box = (0, box_sizing_1.paddingBox)(paint.container);
+    if (box.width - 2 * spread <= 0 || box.height - 2 * spread <= 0)
+        return [];
+    return (0, box_shadow_geometry_1.spreadShadowPath)((0, bound_curves_1.calculatePaddingBoxPath)(paint.curves), -spread);
+};
+// Rasterize in local coordinates, blur once, and then let the destination CTM
+// transform the complete shadow. This also preserves anisotropic/sheared blur.
+const paintShadowSurface = async (ctx, paint, shadow, options, budget, space) => {
+    const padding = (0, box_sizing_1.paddingBox)(paint.container);
+    const blur = shadow.blur.number / 2;
+    const margin = Math.ceil(3 * blur) + 2;
+    const spread = shadow.spread.number;
+    const area = shadow.inset
+        ? padding
+        : paint.container.bounds.add(shadow.offsetX.number - spread, shadow.offsetY.number - spread, 2 * spread, 2 * spread);
+    const bounds = (0, surface_bounds_1.cropSurface)(area.add(-margin, -margin, 2 * margin, 2 * margin), space.viewport, margin, space.scale);
+    if (!bounds.width || !bounds.height)
+        return true;
+    const width = Math.ceil(bounds.width * space.scale);
+    const height = Math.ceil(bounds.height * space.scale);
+    const reserved = (0, surface_bounds_1.reserveSurface)(budget, width, height);
+    if (!reserved)
+        return false;
+    let source;
+    let filtered;
+    try {
+        source = ctx.canvas.ownerDocument.createElement('canvas');
+        source.width = width;
+        source.height = height;
+        const sourceCtx = source.getContext('2d');
+        if (!sourceCtx)
+            return false;
+        sourceCtx.scale(space.scale, space.scale);
+        sourceCtx.translate(-bounds.left, -bounds.top);
+        const silhouette = shadow.inset
+            ? insetHole(paint, shadow)
+            : (0, box_shadow_geometry_1.spreadShadowPath)((0, bound_curves_1.calculateBorderBoxPath)(paint.curves), spread);
+        const path = (0, path_1.transformPath)(silhouette, shadow.offsetX.number, shadow.offsetY.number, 0, 0);
+        if (shadow.inset)
+            complement(sourceCtx, bounds, path);
+        else
+            (0, canvas_path_1.createCanvasPath)(sourceCtx, path);
+        sourceCtx.fillStyle = (0, color_utilities_1.asString)(shadow.color);
+        sourceCtx.fill(shadow.inset ? 'evenodd' : 'nonzero');
+        filtered = await (0, filter_surface_1.renderFilterSurface)(source, { blur }, 1, space.scale, options.signal);
+        ctx.save();
+        try {
+            if (shadow.inset) {
+                (0, canvas_path_1.createCanvasPath)(ctx, (0, bound_curves_1.calculatePaddingBoxPath)(paint.curves));
+                ctx.clip();
+            }
+            else {
+                complement(ctx, space.viewport, (0, bound_curves_1.calculateBorderBoxPath)(paint.curves));
+                ctx.clip('evenodd');
+            }
+            ctx.drawImage(filtered, bounds.left, bounds.top, filtered.width / space.scale, filtered.height / space.scale);
+        }
+        finally {
+            ctx.restore();
+        }
+        return true;
+    }
+    catch (error) {
+        if (!(error instanceof filter_surface_1.FilterSurfaceError))
+            throw error;
+        return false;
+    }
+    finally {
+        if (filtered && filtered !== source)
+            (0, filter_surface_1.releaseSurface)(filtered);
+        if (source)
+            (0, filter_surface_1.releaseSurface)(source);
+        budget.pixels -= reserved;
+    }
+};
+const paintBoxShadow = async (ctx, paint, shadow, options, budget) => {
+    if (options.signal?.aborted)
+        throw new DOMException('The operation was aborted.', 'AbortError');
+    if ((0, color_utilities_1.isTransparent)(shadow.color))
+        return;
+    const spread = shadow.spread.number;
+    if (!shadow.inset &&
+        (paint.container.bounds.width + 2 * spread <= 0 || paint.container.bounds.height + 2 * spread <= 0))
+        return;
+    // getTransform includes capture scale, CSS transforms and their origins.
+    // Without it the CTM is unknown: approximate it with the capture transform
+    // and only ever move the mask relative to the real CTM (see below).
+    const knownTransform = typeof ctx.getTransform === 'function';
+    const matrix = knownTransform
+        ? ctx.getTransform()
+        : {
+            a: options.scale,
+            b: 0,
+            c: 0,
+            d: options.scale,
+            e: -options.x * options.scale,
+            f: -options.y * options.scale
+        };
+    const space = (0, box_shadow_transform_1.shadowSpace)(matrix, ctx.canvas.width, ctx.canvas.height);
+    // Singular transforms have zero painted area; never attempt to invert them.
+    if (!space)
+        return;
+    const { viewport } = space;
+    if (shadow.blur.number > 0 &&
+        (shadow.inset || !space.uniform) &&
+        (await paintShadowSurface(ctx, paint, shadow, options, budget, space)))
+        return;
+    const padding = (0, box_sizing_1.paddingBox)(paint.container);
+    ctx.save();
+    try {
+        if (shadow.inset && shadow.blur.number === 0) {
+            (0, canvas_path_1.createCanvasPath)(ctx, (0, bound_curves_1.calculatePaddingBoxPath)(paint.curves));
+            ctx.clip();
+            complement(ctx, padding, (0, path_1.transformPath)(insetHole(paint, shadow), shadow.offsetX.number, shadow.offsetY.number, 0, 0));
+            ctx.fillStyle = (0, color_utilities_1.asString)(shadow.color);
+            ctx.fill('evenodd');
+            return;
+        }
+        const margin = Math.ceil(shadow.blur.number * 2 +
+            Math.abs(spread) +
+            Math.abs(shadow.offsetX.number) +
+            Math.abs(shadow.offsetY.number)) + 2;
+        // Displace in OUTPUT pixels, not along a CSS axis. A rotated or reflected
+        // local x axis need not point off the left edge of the output bitmap.
+        const sourceBounds = shadow.inset
+            ? padding.add(-margin, -margin, 2 * margin, 2 * margin)
+            : paint.container.bounds.add(-spread, -spread, 2 * spread, 2 * spread);
+        const { a, b, c, d, e, f } = matrix;
+        const right = sourceBounds.left + sourceBounds.width;
+        const bottom = sourceBounds.top + sourceBounds.height;
+        const maxX = Math.max(a * sourceBounds.left + c * sourceBounds.top + e, a * right + c * sourceBounds.top + e, a * right + c * bottom + e, a * sourceBounds.left + c * bottom + e);
+        const displacement = Math.max(constants_1.SHADOW_MASK_OFFSET, maxX + margin * space.scale + 2);
+        if (shadow.inset) {
+            (0, canvas_path_1.createCanvasPath)(ctx, (0, bound_curves_1.calculatePaddingBoxPath)(paint.curves));
+            ctx.clip();
+        }
+        else {
+            complement(ctx, viewport, (0, bound_curves_1.calculateBorderBoxPath)(paint.curves));
+            ctx.clip('evenodd');
+        }
+        // Current paths retain their device coordinates across transform changes.
+        // setTransform with an approximate matrix would discard CSS transforms
+        // on the real CTM, so the legacy path translates relative to it instead.
+        if (knownTransform)
+            ctx.setTransform(a, b, c, d, e - displacement, f);
+        else
+            ctx.translate(-displacement / a, 0);
+        if (shadow.inset)
+            complement(ctx, sourceBounds, insetHole(paint, shadow));
+        else
+            (0, canvas_path_1.createCanvasPath)(ctx, (0, box_shadow_geometry_1.spreadShadowPath)((0, bound_curves_1.calculateBorderBoxPath)(paint.curves), spread));
+        if (knownTransform)
+            ctx.setTransform(a, b, c, d, e, f);
+        else
+            ctx.translate(displacement / a, 0);
+        ctx.shadowOffsetX = displacement + a * shadow.offsetX.number + c * shadow.offsetY.number;
+        ctx.shadowOffsetY = b * shadow.offsetX.number + d * shadow.offsetY.number;
+        // Allocation/filter-failure fallback remains bounded-memory. Its blur is
+        // isotropic under nonuniform transforms, but positioning stays correct.
+        ctx.shadowBlur = shadow.blur.number * space.scale;
+        ctx.shadowColor = (0, color_utilities_1.asString)(shadow.color);
+        ctx.fillStyle = 'rgb(0, 0, 0)';
+        ctx.fill(shadow.inset ? 'evenodd' : 'nonzero');
+    }
+    finally {
+        ctx.restore();
+    }
+};
+exports.paintBoxShadow = paintBoxShadow;

package/dist/lib/render/canvas/box-shadow-transform.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shadowSpace = void 0;
+const bounds_1 = require("../../css/layout/bounds");
+// Map the output bitmap back into the current user space. Capture x/y are not
+// in this space once CSS transforms (including ancestor transforms) are active.
+// An AABB of all four inverse-transformed corners is conservative under rotation.
+const shadowSpace = (matrix, width, height) => {
+    const { a, b, c, d, e, f } = matrix;
+    if (![a, b, c, d, e, f, width, height].every(Number.isFinite))
+        return null;
+    const determinant = a * d - b * c;
+    if (!Number.isFinite(determinant) || determinant === 0)
+        return null;
+    const inversePoint = (x, y) => ({
+        x: (d * (x - e) - c * (y - f)) / determinant,
+        y: (-b * (x - e) + a * (y - f)) / determinant
+    });
+    const corners = [inversePoint(0, 0), inversePoint(width, 0), inversePoint(width, height), inversePoint(0, height)];
+    if (!corners.every((point) => Number.isFinite(point.x) && Number.isFinite(point.y)))
+        return null;
+    const left = Math.min(...corners.map((point) => point.x));
+    const top = Math.min(...corners.map((point) => point.y));
+    const right = Math.max(...corners.map((point) => point.x));
+    const bottom = Math.max(...corners.map((point) => point.y));
+    // Largest singular value: enough local raster resolution for either output
+    // axis. A scalar Canvas shadow blur is exact only for similarity transforms.
+    const xx = a * a + b * b;
+    const yy = c * c + d * d;
+    const xy = a * c + b * d;
+    const scale = Math.sqrt((xx + yy + Math.hypot(xx - yy, 2 * xy)) / 2);
+    if (!Number.isFinite(scale) || scale <= 0)
+        return null;
+    const tolerance = 1e-10 * Math.max(xx, yy);
+    return {
+        matrix,
+        viewport: new bounds_1.Bounds(left, top, right - left, bottom - top),
+        scale,
+        uniform: Math.abs(xx - yy) <= tolerance && Math.abs(xy) <= tolerance
+    };
+};
+exports.shadowSpace = shadowSpace;

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

@@ -21,7 +21,7 @@ const effects_renderer_1 = require("./effects-renderer");
 const canvas_path_1 = require("./canvas-path");
 const object_fit_1 = require("../object-fit");
 const content_renderer_1 = require("./content-renderer");
-const constants_1 = require("../../core/constants");
+const box_shadow_painter_1 = require("./box-shadow-painter");
 const writing_mode_1 = require("../../css/property-descriptors/writing-mode");
 const font_utils_1 = require("./font-utils");
 const text_1 = require("../../css/layout/text");
@@ -399,30 +399,7 @@ class CanvasRenderer {
                     await this.renderSurfaceBoxShadow(paint, shadow);
                     continue;
                 }
-                this.ctx.save();
-                const borderBoxArea = (0, bound_curves_1.calculateBorderBoxPath)(paint.curves);
-                const maskOffset = shadow.inset ? 0 : constants_1.SHADOW_MASK_OFFSET;
-                const shadowPaintingArea = (0, path_1.transformPath)(borderBoxArea, -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number, (shadow.inset ? 1 : -1) * shadow.spread.number, shadow.spread.number * (shadow.inset ? -2 : 2), shadow.spread.number * (shadow.inset ? -2 : 2));
-                if (shadow.inset) {
-                    this.path(borderBoxArea);
-                    this.ctx.clip();
-                    this.mask(shadowPaintingArea);
-                }
-                else {
-                    this.mask(borderBoxArea);
-                    this.ctx.clip();
-                    this.path(shadowPaintingArea);
-                }
-                // Canvas shadow metrics ignore the transform. Surface sources
-                // need capture-pixel offsets, including the displaced mask.
-                const shadowScale = this.surfaceRoot ? this.options.scale : 1;
-                this.ctx.shadowOffsetX = (shadow.offsetX.number + maskOffset) * shadowScale;
-                this.ctx.shadowOffsetY = shadow.offsetY.number * shadowScale;
-                this.ctx.shadowColor = (0, color_utilities_1.asString)(shadow.color);
-                this.ctx.shadowBlur = shadow.blur.number * shadowScale;
-                this.ctx.fillStyle = shadow.inset ? (0, color_utilities_1.asString)(shadow.color) : 'rgba(0,0,0,1)';
-                this.ctx.fill();
-                this.ctx.restore();
+                await (0, box_shadow_painter_1.paintBoxShadow)(this.ctx, paint, shadow, this.options, this.surfaceBudget);
             }
         }
         // Render border-image if present (replaces traditional borders per CSS spec)

package/dist/types/render/canvas/box-shadow-geometry.d.ts

@@ -0,0 +1,3 @@
+import { Path } from '../path';
+export declare const shadowRadius: (radius: number, spread: number) => number;
+export declare const spreadShadowPath: (paths: Path[], spread: number) => Path[];

package/dist/types/render/canvas/box-shadow-painter.d.ts

@@ -0,0 +1,13 @@
+import { BoxShadow } from '../../css/property-descriptors/box-shadow';
+import { ElementPaint } from '../stacking-context';
+import { SurfaceBudget } from './surface-bounds';
+interface ShadowOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+    signal?: AbortSignal;
+}
+export declare const paintBoxShadow: (ctx: CanvasRenderingContext2D, paint: ElementPaint, shadow: BoxShadow[number], options: ShadowOptions, budget: SurfaceBudget) => Promise<void>;
+export {};

package/dist/types/render/canvas/box-shadow-transform.d.ts

@@ -0,0 +1,16 @@
+import { Bounds } from '../../css/layout/bounds';
+export interface ShadowTransform {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+export interface ShadowSpace {
+    matrix: ShadowTransform;
+    viewport: Bounds;
+    scale: number;
+    uniform: boolean;
+}
+export declare const shadowSpace: (matrix: ShadowTransform, width: number, height: number) => ShadowSpace | null;

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.4.4",
+  "version": "2.4.5",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",