html2canvas-pro 2.3.0 → 2.3.2

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.3.2 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -8950,60 +8950,6 @@
 		}
 	};
 	//#endregion
-	//#region src/core/util.ts
-	const SMALL_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-	//#endregion
-	//#region src/render/font-metrics.ts
-	const SAMPLE_TEXT = "Hidden Text";
-	var FontMetrics = class {
-		constructor(document) {
-			this._data = {};
-			this._document = document;
-		}
-		parseMetrics(fontFamily, fontSize) {
-			const container = this._document.createElement("div");
-			const img = this._document.createElement("img");
-			const span = this._document.createElement("span");
-			const body = this._document.body;
-			container.style.visibility = "hidden";
-			container.style.fontFamily = fontFamily;
-			container.style.fontSize = fontSize;
-			container.style.margin = "0";
-			container.style.padding = "0";
-			container.style.whiteSpace = "nowrap";
-			body.appendChild(container);
-			img.src = SMALL_IMAGE;
-			img.width = 1;
-			img.height = 1;
-			img.style.margin = "0";
-			img.style.padding = "0";
-			img.style.verticalAlign = "baseline";
-			span.style.fontFamily = fontFamily;
-			span.style.fontSize = fontSize;
-			span.style.margin = "0";
-			span.style.padding = "0";
-			span.appendChild(this._document.createTextNode(SAMPLE_TEXT));
-			container.appendChild(span);
-			container.appendChild(img);
-			const baseline = img.offsetTop - span.offsetTop + 2;
-			container.removeChild(span);
-			container.appendChild(this._document.createTextNode(SAMPLE_TEXT));
-			container.style.lineHeight = "normal";
-			img.style.verticalAlign = "super";
-			const middle = img.offsetTop - container.offsetTop + 2;
-			body.removeChild(container);
-			return {
-				baseline,
-				middle
-			};
-		}
-		getMetrics(fontFamily, fontSize) {
-			const key = `${fontFamily} ${fontSize}`;
-			if (typeof this._data[key] === "undefined") this._data[key] = this.parseMetrics(fontFamily, fontSize);
-			return this._data[key];
-		}
-	};
-	//#endregion
 	//#region src/render/canvas/text/text-decoration-renderer.ts
 	var TextDecorationRenderer = class {
 		constructor(ctx) {
@@ -9092,6 +9038,33 @@
 		}
 	};
 	//#endregion
+	//#region src/render/canvas/font-utils.ts
+	/**
+	* Font measurement utility
+	*
+	* Provides Canvas API-based baseline measurement that works correctly with
+	* webfonts (which may not be loaded in the original document) and system fonts.
+	*
+	* Fallback chain:
+	*   1. fontBoundingBoxAscent — font-level metric (Chrome 99+, FF 116+, Safari 17.4+)
+	*   2. actualBoundingBoxAscent — glyph-level metric (widely supported)
+	*   3. fallback value — coarse CSS fallback
+	*/
+	const SAMPLE_TEXT = "Mg";
+	/**
+	* Measure the baseline ascent for the currently set font.
+	*
+	* @param ctx - Canvas 2D rendering context with ctx.font already set
+	* @param fallback - Fallback value when no metrics are available (e.g. fontSize.number)
+	* @returns The distance from the text baseline to the top of the bounding box
+	*/
+	const measureBaseline = (ctx, fallback) => {
+		const tm = ctx.measureText(SAMPLE_TEXT);
+		const fmAscent = tm.fontBoundingBoxAscent;
+		const ascent = fmAscent !== void 0 && !Number.isNaN(fmAscent) ? fmAscent : tm.actualBoundingBoxAscent;
+		return ascent !== void 0 && !Number.isNaN(ascent) ? ascent : fallback;
+	};
+	//#endregion
 	//#region src/render/canvas/text-renderer.ts
 	const iOSBrokenFonts = ["-apple-system", "system-ui"];
 	/**
@@ -9258,19 +9231,19 @@
 				this.ctx.strokeText(letter, x, y);
 			});
 		}
-		renderTextStrokeWithStyle(text, styles) {
+		renderTextStrokeWithStyle(text, styles, baseline) {
 			if (!styles.webkitTextStrokeWidth || !text.text.trim().length) return;
 			this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
 			this.ctx.lineWidth = styles.webkitTextStrokeWidth;
 			this.ctx.lineJoin = getTextStrokeLineJoin();
-			this.renderStrokeText(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+			this.renderStrokeText(text, styles.letterSpacing, baseline, styles.writingMode);
 			this.ctx.strokeStyle = "";
 			this.ctx.lineWidth = 0;
 			this.ctx.lineJoin = "miter";
 		}
-		renderTextFillWithShadows(text, styles) {
+		renderTextFillWithShadows(text, styles, baseline) {
 			this.ctx.fillStyle = asString(styles.color);
-			this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+			this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline, styles.writingMode);
 			const textShadows = styles.textShadow;
 			if (textShadows.length && text.text.trim().length) {
 				textShadows.slice(0).reverse().forEach((textShadow) => {
@@ -9278,7 +9251,7 @@
 					this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
 					this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
 					this.ctx.shadowBlur = textShadow.blur.number;
-					this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+					this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline, styles.writingMode);
 				});
 				this.ctx.shadowColor = "";
 				this.ctx.shadowOffsetX = 0;
@@ -9290,15 +9263,15 @@
 		* Helper method to render text with paint order support
 		* Reduces code duplication in line-clamp and normal rendering
 		*/
-		renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers) {
+		renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers, baseline) {
 			paintOrderLayers.forEach((paintOrderLayer) => {
 				switch (paintOrderLayer) {
 					case 0:
 						this.ctx.fillStyle = asString(styles.color);
-						this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+						this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, baseline, styles.writingMode);
 						break;
 					case 1:
-						this.renderTextStrokeWithStyle(textBound, styles);
+						this.renderTextStrokeWithStyle(textBound, styles, baseline);
 						break;
 				}
 			});
@@ -9358,7 +9331,7 @@
 		* Groups text bounds by their Y position into visual lines, then renders
 		* only the first N-1 complete lines followed by an ellipsis on the Nth line.
 		*/
-		renderLineClampedText(text, styles, paintOrder, containerBounds) {
+		renderLineClampedText(text, styles, paintOrder, baseline, containerBounds) {
 			const lineHeight = styles.fontSize.number * 1.5;
 			const lines = [];
 			let currentLine = [];
@@ -9373,7 +9346,7 @@
 			if (currentLine.length > 0) lines.push(currentLine);
 			const maxLines = styles.webkitLineClamp;
 			if (lines.length <= maxLines) return false;
-			for (let i = 0; i < maxLines - 1; i++) lines[i].forEach((tb) => this.renderTextBoundWithPaintOrder(tb, styles, paintOrder));
+			for (let i = 0; i < maxLines - 1; i++) lines[i].forEach((tb) => this.renderTextBoundWithPaintOrder(tb, styles, paintOrder, baseline));
 			const lastLine = lines[maxLines - 1];
 			if (lastLine?.length && containerBounds) {
 				const textStr = lastLine.map((tb) => tb.text).join("");
@@ -9382,8 +9355,8 @@
 				const bounds = new TextBounds(this.truncateTextWithEllipsis(textStr, avail, styles.letterSpacing), first.bounds);
 				for (const layer of paintOrder) if (layer === 0) {
 					this.ctx.fillStyle = asString(styles.color);
-					this.renderTextWithLetterSpacing(bounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
-				} else if (layer === 1) this.renderTextStrokeWithStyle(bounds, styles);
+					this.renderTextWithLetterSpacing(bounds, styles.letterSpacing, baseline, styles.writingMode);
+				} else if (layer === 1) this.renderTextStrokeWithStyle(bounds, styles, baseline);
 			}
 			return true;
 		}
@@ -9391,34 +9364,36 @@
 		* Render single-line text with text-overflow: ellipsis.
 		* Returns true if ellipsis was applied (caller should skip normal rendering).
 		*/
-		renderEllipsisText(text, styles, paintOrder, containerBounds) {
+		renderEllipsisText(text, styles, paintOrder, baseline, containerBounds) {
 			const lineHeight = styles.fontSize.number * 1.5;
 			const firstTop = text.textBounds[0].bounds.top;
 			if (!text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * .5)) return false;
 			let fullText = text.textBounds.map((tb) => tb.text).join("").replace(/\s+/g, " ").trim();
 			if (this.ctx.measureText(fullText).width <= containerBounds.width) return false;
 			const bounds = new TextBounds(this.truncateTextWithEllipsis(fullText, containerBounds.width, styles.letterSpacing), text.textBounds[0].bounds);
-			for (const layer of paintOrder) if (layer === 0) this.renderTextFillWithShadows(bounds, styles);
-			else if (layer === 1) this.renderTextStrokeWithStyle(bounds, styles);
+			for (const layer of paintOrder) if (layer === 0) this.renderTextFillWithShadows(bounds, styles, baseline);
+			else if (layer === 1) this.renderTextStrokeWithStyle(bounds, styles, baseline);
 			return true;
 		}
 		async renderTextNode(text, styles, containerBounds) {
 			this.glyphWidthCache = null;
-			this.ctx.font = this.createFontStyle(styles)[0];
+			const [fontString] = this.createFontStyle(styles);
+			this.ctx.font = fontString;
 			this.ctx.direction = styles.direction === 1 ? "rtl" : "ltr";
 			this.ctx.textAlign = "left";
 			this.ctx.textBaseline = "alphabetic";
 			const paintOrder = styles.paintOrder;
+			const baseline = measureBaseline(this.ctx, styles.fontSize.number);
 			if (styles.webkitLineClamp > 0 && (styles.display & 2) !== 0 && styles.overflowY === 1 && text.textBounds.length > 0) {
-				if (this.renderLineClampedText(text, styles, paintOrder, containerBounds)) return;
+				if (this.renderLineClampedText(text, styles, paintOrder, baseline, containerBounds)) return;
 			}
-			if (styles.textOverflow === 1 && containerBounds && styles.overflowX === 1 && text.textBounds.length > 0 && this.renderEllipsisText(text, styles, paintOrder, containerBounds)) return;
+			if (styles.textOverflow === 1 && containerBounds && styles.overflowX === 1 && text.textBounds.length > 0 && this.renderEllipsisText(text, styles, paintOrder, baseline, containerBounds)) return;
 			text.textBounds.forEach((tb) => {
 				paintOrder.forEach((layer) => {
 					if (layer === 0) {
-						this.renderTextFillWithShadows(tb, styles);
+						this.renderTextFillWithShadows(tb, styles, baseline);
 						if (styles.textDecorationLine.length) this.renderTextDecoration(tb.bounds, styles);
-					} else if (layer === 1) this.renderTextStrokeWithStyle(tb, styles);
+					} else if (layer === 1) this.renderTextStrokeWithStyle(tb, styles, baseline);
 				});
 			});
 		}
@@ -10304,7 +10279,7 @@
 	/**
 	* Render form element content: checkbox, radio, text input.
 	*/
-	function renderFormElements(ctx, fontMetrics, textRenderer, pathFn, container, styles) {
+	function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
 		if (container instanceof InputElementContainer) {
 			const size = Math.min(container.bounds.width, container.bounds.height);
 			if (container.type === "checkbox" && container.checked) {
@@ -10331,9 +10306,9 @@
 			}
 		}
 		if (isTextInputElement(container) && container.value.length) {
-			const [font, fontFamily, fontSize] = textRenderer.createFontStyle(styles);
-			const { baseline } = fontMetrics.getMetrics(fontFamily, fontSize);
+			const [font] = textRenderer.createFontStyle(styles);
 			ctx.font = font;
+			const baseline = measureBaseline(ctx, getAbsoluteValue(styles.fontSize, 0));
 			ctx.fillStyle = container instanceof InputElementContainer && container.isPlaceholder ? asString(PLACEHOLDER_COLOR) : asString(styles.color);
 			ctx.textBaseline = "alphabetic";
 			ctx.textAlign = canvasTextAlign(container.styles.textAlign);
@@ -10431,7 +10406,6 @@
 				this.canvas.style.width = `${options.width}px`;
 				this.canvas.style.height = `${options.height}px`;
 			}
-			this.fontMetrics = new FontMetrics(document);
 			this.ctx.scale(this.options.scale, this.options.scale);
 			this.ctx.translate(-options.x, -options.y);
 			this.ctx.textBaseline = "bottom";
@@ -10455,7 +10429,6 @@
 			this.effectsRenderer = new EffectsRenderer({ ctx: this.ctx }, { path: (paths) => this.path(paths) });
 			this.textRenderer = new TextRenderer({
 				ctx: this.ctx,
-				context: this.context,
 				options: { scale: options.scale }
 			});
 			this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
@@ -10503,7 +10476,7 @@
 				width: this.options.width,
 				height: this.options.height
 			}, (ctx, opts) => new CanvasRenderer(ctx, opts), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
-			renderFormElements(this.ctx, this.fontMetrics, this.textRenderer, this.path.bind(this), container, styles);
+			renderFormElements(this.ctx, this.textRenderer, this.path.bind(this), container, styles);
 			await renderListMarker(this.ctx, this.context, this.textRenderer, paint, container, styles);
 		}
 		async renderStackContent(stack) {