html2canvas-pro 2.3.8 → 2.4.0

package/dist/html2canvas-pro.esm.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
 */
@@ -6983,19 +6983,18 @@ var DocumentCloner = class {
 		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;
 		});
 		/**
@@ -9085,8 +9084,8 @@ var TextDecorationRenderer = class {
 /**
 * 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+)
@@ -9094,6 +9093,18 @@ var TextDecorationRenderer = class {
 *   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.
 *
@@ -9102,10 +9113,7 @@ const SAMPLE_TEXT = "Mg";
 * @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
@@ -10352,11 +10360,13 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
 	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:
@@ -10367,21 +10377,17 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
 				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;
@@ -10403,6 +10409,14 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
 	}
 }
 /**
+* 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.
@@ -10598,11 +10612,13 @@ var CanvasRenderer = class CanvasRenderer {
 	}
 	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();
 	}