html2canvas-pro 2.3.8 → 2.4.0

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.8 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.4.0 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -6990,19 +6990,18 @@
 			const documentClone = cloneWindow.document;
 			const iframeLoad = iframeLoader(iframe).then(async () => {
 				this.scrolledElements.forEach(restoreNodeScroll);
-				if (cloneWindow) {
-					cloneWindow.scrollTo(windowSize.left, windowSize.top);
-					if (/AppleWebKit/g.test(navigator.userAgent) && (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)) {
-						this.context.logger.warn("Unable to restore scroll position for cloned document");
-						this.context.windowBounds = this.context.windowBounds.add(cloneWindow.scrollX - windowSize.left, cloneWindow.scrollY - windowSize.top, 0, 0);
-					}
-				}
+				if (cloneWindow) cloneWindow.scrollTo(windowSize.left, windowSize.top);
 				const onclone = this.options.onclone;
 				const referenceElement = this.clonedReferenceElement;
 				if (typeof referenceElement === "undefined") throw new Error(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
 				if (documentClone.fonts && documentClone.fonts.ready) await documentClone.fonts.ready;
 				if (/(AppleWebKit)/g.test(navigator.userAgent)) await imagesReady(documentClone);
-				if (typeof onclone === "function") return Promise.resolve().then(() => onclone(documentClone, referenceElement)).then(() => iframe);
+				if (typeof onclone === "function") await Promise.resolve().then(() => onclone(documentClone, referenceElement));
+				cloneWindow.scrollTo(windowSize.left, windowSize.top);
+				if (/AppleWebKit/g.test(navigator.userAgent) && (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)) {
+					this.context.logger.warn("Unable to restore scroll position for cloned document");
+					this.context.windowBounds = this.context.windowBounds.add(cloneWindow.scrollX - windowSize.left, cloneWindow.scrollY - windowSize.top, 0, 0);
+				}
 				return iframe;
 			});
 			/**
@@ -9092,8 +9091,8 @@
 	/**
 	* 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.
+	* Provides Canvas API-based font 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+)
@@ -9101,6 +9100,18 @@
 	*   3. fallback value — coarse CSS fallback
 	*/
 	const SAMPLE_TEXT = "Mg";
+	const isValidMetric = (value) => value !== void 0 && !Number.isNaN(value);
+	/**
+	* Measure the baseline ascent and full font box for the currently set font.
+	*/
+	const measureFontMetrics = (ctx, fallback) => {
+		const tm = ctx.measureText(SAMPLE_TEXT);
+		const fontMetrics = tm;
+		return {
+			baseline: isValidMetric(fontMetrics.fontBoundingBoxAscent) ? fontMetrics.fontBoundingBoxAscent : isValidMetric(tm.actualBoundingBoxAscent) ? tm.actualBoundingBoxAscent : fallback,
+			height: isValidMetric(fontMetrics.fontBoundingBoxAscent) && isValidMetric(fontMetrics.fontBoundingBoxDescent) ? fontMetrics.fontBoundingBoxAscent + fontMetrics.fontBoundingBoxDescent : isValidMetric(tm.actualBoundingBoxAscent) && isValidMetric(tm.actualBoundingBoxDescent) ? tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent : fallback
+		};
+	};
 	/**
 	* Measure the baseline ascent for the currently set font.
 	*
@@ -9109,10 +9120,7 @@
 	* @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;
+		return measureFontMetrics(ctx, fallback).baseline;
 	};
 	//#endregion
 	//#region src/render/canvas/text-renderer.ts
@@ -10359,11 +10367,13 @@
 		if (isTextInputElement(container) && container.value.length) {
 			const [font] = textRenderer.createFontStyle(styles);
 			ctx.font = font;
-			const baseline = measureBaseline(ctx, getAbsoluteValue(styles.fontSize, 0));
+			const fontSizeValue = getAbsoluteValue(styles.fontSize, 0);
+			const { baseline, height: fontHeight } = measureFontMetrics(ctx, fontSizeValue);
 			ctx.fillStyle = container instanceof InputElementContainer && container.isPlaceholder ? asString(PLACEHOLDER_COLOR) : asString(styles.color);
 			ctx.textBaseline = "alphabetic";
 			ctx.textAlign = canvasTextAlign(container.styles.textAlign);
 			const bounds = contentBox(container);
+			const clipBounds = container instanceof InputElementContainer ? inputTextClipBounds(bounds, paddingBox(container), fontHeight) : bounds;
 			let x = 0;
 			switch (container.styles.textAlign) {
 				case 1:
@@ -10374,21 +10384,17 @@
 					break;
 			}
 			let verticalOffset = 0;
-			if (container instanceof InputElementContainer) {
-				const fontSizeValue = getAbsoluteValue(styles.fontSize, 0);
-				verticalOffset = (bounds.height - fontSizeValue) / 2;
-			}
+			if (container instanceof InputElementContainer) verticalOffset = (bounds.height - fontHeight) / 2;
 			const textBounds = bounds.add(x, verticalOffset, 0, 0);
 			ctx.save();
 			pathFn([
-				new Vector(bounds.left, bounds.top),
-				new Vector(bounds.left + bounds.width, bounds.top),
-				new Vector(bounds.left + bounds.width, bounds.top + bounds.height),
-				new Vector(bounds.left, bounds.top + bounds.height)
+				new Vector(clipBounds.left, clipBounds.top),
+				new Vector(clipBounds.left + clipBounds.width, clipBounds.top),
+				new Vector(clipBounds.left + clipBounds.width, clipBounds.top + clipBounds.height),
+				new Vector(clipBounds.left, clipBounds.top + clipBounds.height)
 			]);
 			ctx.clip();
 			const lines = wrapTextToWidth(ctx, container.value, bounds.width, styles.whiteSpace === "pre" || styles.whiteSpace === "nowrap");
-			const fontSizeValue = getAbsoluteValue(styles.fontSize, 0);
 			const lineHeight = computeLineHeight(styles.lineHeight, fontSizeValue);
 			lines.forEach((line, index) => {
 				let lineX = textBounds.left;
@@ -10410,6 +10416,14 @@
 		}
 	}
 	/**
+	* Native single-line inputs may paint value text into their padding area when
+	* fixed height and vertical padding leave a content box shorter than the font.
+	* Preserve the content box horizontally, but avoid clipping those glyphs to the
+	* collapsed vertical content box.
+	* @internal exported for testing
+	*/
+	const inputTextClipBounds = (contentBounds, inputPaddingBox, fontHeight) => contentBounds.height < fontHeight ? new Bounds(contentBounds.left, inputPaddingBox.top, contentBounds.width, inputPaddingBox.height) : contentBounds;
+	/**
 	* Split text into lines that fit the given pixel width, preserving hard line
 	* breaks and (when wrapping is enabled) breaking at word boundaries — mirroring
 	* how a <textarea> lays out its value.
@@ -10605,11 +10619,13 @@
 		}
 		mask(paths) {
 			this.ctx.beginPath();
-			this.ctx.moveTo(0, 0);
-			this.ctx.lineTo(this.options.width, 0);
-			this.ctx.lineTo(this.options.width, this.options.height);
-			this.ctx.lineTo(0, this.options.height);
-			this.ctx.lineTo(0, 0);
+			const x = this.options.x;
+			const y = this.options.y;
+			this.ctx.moveTo(x, y);
+			this.ctx.lineTo(x + this.options.width, y);
+			this.ctx.lineTo(x + this.options.width, y + this.options.height);
+			this.ctx.lineTo(x, y + this.options.height);
+			this.ctx.lineTo(x, y);
 			this.formatPath(paths.slice(0).reverse());
 			this.ctx.closePath();
 		}