html2canvas-pro 2.3.9 → 2.4.1

package/dist/html2canvas-pro.esm.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
 */
@@ -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;
 		});
 		/**
@@ -8083,6 +8082,39 @@ var CanvasElementContainer = class extends ElementContainer {
 };
 //#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);
@@ -8090,7 +8122,7 @@ var SVGElementContainer = class extends ElementContainer {
 		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);
@@ -9085,8 +9117,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 +9126,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 +9146,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 +10393,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 +10410,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 +10442,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.