html2canvas-pro 2.3.9 → 2.4.1

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.9 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.4.1 <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;
 			});
 			/**
@@ -8090,6 +8089,39 @@
 	};
 	//#endregion
 	//#region src/dom/replaced-elements/svg-element-container.ts
+	const BOX_OFFSET_PROPERTIES = [
+		"position",
+		"inset",
+		"top",
+		"right",
+		"bottom",
+		"left",
+		"inset-inline",
+		"inset-inline-start",
+		"inset-inline-end",
+		"inset-block",
+		"inset-block-start",
+		"inset-block-end",
+		"margin",
+		"margin-top",
+		"margin-right",
+		"margin-bottom",
+		"margin-left",
+		"margin-inline",
+		"margin-inline-start",
+		"margin-inline-end",
+		"margin-block",
+		"margin-block-start",
+		"margin-block-end"
+	];
+	const serializeWithoutBoxOffsets = (serializer, img) => {
+		const style = img.getAttribute("style");
+		BOX_OFFSET_PROPERTIES.forEach((property) => img.style.removeProperty(property));
+		const serialized = serializer.serializeToString(img);
+		if (style === null) img.removeAttribute("style");
+		else img.setAttribute("style", style);
+		return serialized;
+	};
 	var SVGElementContainer = class extends ElementContainer {
 		constructor(context, img) {
 			super(context, img);
@@ -8097,7 +8129,7 @@
 			const bounds = parseBounds(context, img);
 			img.setAttribute("width", `${bounds.width}px`);
 			img.setAttribute("height", `${bounds.height}px`);
-			this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
+			this.svg = `data:image/svg+xml,${encodeURIComponent(serializeWithoutBoxOffsets(s, img))}`;
 			this.intrinsicWidth = img.width.baseVal.value;
 			this.intrinsicHeight = img.height.baseVal.value;
 			this.context.cache.addImage(this.svg);
@@ -9092,8 +9124,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 +9133,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 +9153,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 +10400,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 +10417,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 +10449,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.