html2canvas-pro 2.4.4 → 2.4.5

package/dist/html2canvas-pro.esm.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
 */
@@ -10805,6 +10805,220 @@ const canvasTextAlign = (textAlign) => {
 	}
 };
 //#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 }) {
@@ -11107,27 +11321,7 @@ var CanvasRenderer = class CanvasRenderer {
 					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) {