html2canvas-pro 2.4.4 → 2.4.5

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.4.4 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.4.5 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -10812,6 +10812,220 @@
 		}
 	};
 	//#endregion
+	//#region src/render/canvas/box-shadow-geometry.ts
+	const shadowRadius = (radius, spread) => {
+		const delta = spread > radius ? spread * (1 + Math.pow(radius / spread - 1, 3)) : spread;
+		return Math.max(0, radius + delta);
+	};
+	const spreadShadowPath = (paths, spread) => {
+		if (spread === 0) return paths;
+		const corners = paths.map((point, index) => {
+			if (!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: shadowRadius(c.rx, spread),
+			y: 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 (!isBezierCurve(point)) return new Vector(x, y);
+			const rx = radii[index].x * factor;
+			const ry = radii[index].y * factor;
+			if (!rx || !ry) return new Vector(x, y);
+			const sx = rx / corner.rx;
+			const sy = ry / corner.ry;
+			const resize = (v) => new Vector(x + (v.x - corner.x) * sx, y + (v.y - corner.y) * sy);
+			return new BezierCurve(resize(point.start), resize(point.startControl), resize(point.endControl), resize(point.end));
+		});
+	};
+	//#endregion
+	//#region src/render/canvas/box-shadow-transform.ts
+	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));
+		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(left, top, right - left, bottom - top),
+			scale,
+			uniform: Math.abs(xx - yy) <= tolerance && Math.abs(xy) <= tolerance
+		};
+	};
+	//#endregion
+	//#region src/render/canvas/box-shadow-painter.ts
+	const complement = (ctx, rect, hole) => {
+		ctx.beginPath();
+		ctx.rect(rect.left, rect.top, rect.width, rect.height);
+		if (hole.length) {
+			formatCanvasPath(ctx, hole);
+			ctx.closePath();
+		}
+	};
+	const insetHole = (paint, shadow) => {
+		const spread = shadow.spread.number;
+		const box = paddingBox(paint.container);
+		if (box.width - 2 * spread <= 0 || box.height - 2 * spread <= 0) return [];
+		return spreadShadowPath(calculatePaddingBoxPath(paint.curves), -spread);
+	};
+	const paintShadowSurface = async (ctx, paint, shadow, options, budget, space) => {
+		const padding = paddingBox(paint.container);
+		const blur = shadow.blur.number / 2;
+		const margin = Math.ceil(3 * blur) + 2;
+		const spread = shadow.spread.number;
+		const bounds = cropSurface((shadow.inset ? padding : paint.container.bounds.add(shadow.offsetX.number - spread, shadow.offsetY.number - spread, 2 * spread, 2 * spread)).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 = 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 path = transformPath(shadow.inset ? insetHole(paint, shadow) : spreadShadowPath(calculateBorderBoxPath(paint.curves), spread), shadow.offsetX.number, shadow.offsetY.number, 0, 0);
+			if (shadow.inset) complement(sourceCtx, bounds, path);
+			else createCanvasPath(sourceCtx, path);
+			sourceCtx.fillStyle = asString(shadow.color);
+			sourceCtx.fill(shadow.inset ? "evenodd" : "nonzero");
+			filtered = await renderFilterSurface(source, { blur }, 1, space.scale, options.signal);
+			ctx.save();
+			try {
+				if (shadow.inset) {
+					createCanvasPath(ctx, calculatePaddingBoxPath(paint.curves));
+					ctx.clip();
+				} else {
+					complement(ctx, space.viewport, 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 FilterSurfaceError)) throw error;
+			return false;
+		} finally {
+			if (filtered && filtered !== source) releaseSurface(filtered);
+			if (source) 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 (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;
+		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 = shadowSpace(matrix, ctx.canvas.width, ctx.canvas.height);
+		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 = paddingBox(paint.container);
+		ctx.save();
+		try {
+			if (shadow.inset && shadow.blur.number === 0) {
+				createCanvasPath(ctx, calculatePaddingBoxPath(paint.curves));
+				ctx.clip();
+				complement(ctx, padding, transformPath(insetHole(paint, shadow), shadow.offsetX.number, shadow.offsetY.number, 0, 0));
+				ctx.fillStyle = 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;
+			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(SHADOW_MASK_OFFSET, maxX + margin * space.scale + 2);
+			if (shadow.inset) {
+				createCanvasPath(ctx, calculatePaddingBoxPath(paint.curves));
+				ctx.clip();
+			} else {
+				complement(ctx, viewport, calculateBorderBoxPath(paint.curves));
+				ctx.clip("evenodd");
+			}
+			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 createCanvasPath(ctx, spreadShadowPath(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;
+			ctx.shadowBlur = shadow.blur.number * space.scale;
+			ctx.shadowColor = asString(shadow.color);
+			ctx.fillStyle = "rgb(0, 0, 0)";
+			ctx.fill(shadow.inset ? "evenodd" : "nonzero");
+		} finally {
+			ctx.restore();
+		}
+	};
+	//#endregion
 	//#region src/render/canvas/canvas-renderer.ts
 	var CanvasRenderer = class CanvasRenderer {
 		constructor(context, options, surfaceRoot, surfaceBudget = { pixels: 0 }) {
@@ -11114,27 +11328,7 @@
 						await this.renderSurfaceBoxShadow(paint, shadow);
 						continue;
 					}
-					this.ctx.save();
-					const borderBoxArea = calculateBorderBoxPath(paint.curves);
-					const maskOffset = shadow.inset ? 0 : SHADOW_MASK_OFFSET;
-					const shadowPaintingArea = 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);
-					}
-					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 = asString(shadow.color);
-					this.ctx.shadowBlur = shadow.blur.number * shadowScale;
-					this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : "rgba(0,0,0,1)";
-					this.ctx.fill();
-					this.ctx.restore();
+					await paintBoxShadow(this.ctx, paint, shadow, this.options, this.surfaceBudget);
 				}
 			}
 			if (styles.borderImageSource) {