html2canvas-pro 2.3.0 → 2.3.1

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.3.1 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -9137,6 +9137,7 @@ var TextRenderer = class {
 	constructor(deps) {
 		this.glyphWidthCache = null;
 		this.ctx = deps.ctx;
+		this.fontMetrics = deps.fontMetrics;
 		this.options = deps.options;
 		this.decorationRenderer = new TextDecorationRenderer(deps.ctx);
 	}
@@ -9251,19 +9252,19 @@ var TextRenderer = class {
 			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) => {
@@ -9271,7 +9272,7 @@ var TextRenderer = class {
 				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;
@@ -9283,15 +9284,15 @@ var TextRenderer = class {
 	* 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;
 			}
 		});
@@ -9351,7 +9352,7 @@ var TextRenderer = class {
 	* 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 = [];
@@ -9366,7 +9367,7 @@ var TextRenderer = class {
 		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("");
@@ -9375,8 +9376,8 @@ var TextRenderer = class {
 			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;
 	}
@@ -9384,34 +9385,36 @@ var TextRenderer = class {
 	* 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, fontFamily, fontSize] = 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 } = this.fontMetrics.getMetrics(fontFamily, fontSize);
 		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);
 			});
 		});
 	}
@@ -10448,7 +10451,7 @@ var CanvasRenderer = class CanvasRenderer {
 		this.effectsRenderer = new EffectsRenderer({ ctx: this.ctx }, { path: (paths) => this.path(paths) });
 		this.textRenderer = new TextRenderer({
 			ctx: this.ctx,
-			context: this.context,
+			fontMetrics: this.fontMetrics,
 			options: { scale: options.scale }
 		});
 		this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);