html2canvas-pro 2.3.6 → 2.3.8

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.6 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.3.8 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -5167,6 +5167,23 @@
 		}
 	};
 	//#endregion
+	//#region src/css/property-descriptors/white-space.ts
+	const whiteSpace = {
+		name: "white-space",
+		initialValue: "normal",
+		prefix: false,
+		type: 2,
+		parse: (_context, value) => {
+			switch (value) {
+				case "pre": return "pre";
+				case "nowrap": return "nowrap";
+				case "pre-wrap": return "pre-wrap";
+				case "pre-line": return "pre-line";
+				default: return "normal";
+			}
+		}
+	};
+	//#endregion
 	//#region src/css/property-descriptors/writing-mode.ts
 	const isVerticalWritingMode = (writingMode) => writingMode !== 0;
 	const isSidewaysWritingMode = (writingMode) => writingMode === 3 || writingMode === 4;
@@ -6607,6 +6624,11 @@
 					wordBreak,
 					"wordBreak"
 				],
+				[
+					"whiteSpace",
+					whiteSpace,
+					"whiteSpace"
+				],
 				[
 					"writingMode",
 					writingMode,
@@ -7452,7 +7474,12 @@
 			this.bounds = parseBounds(this.context, element);
 			if (element.tagName === "FIELDSET") {
 				const legend = element.querySelector(":scope > legend");
-				if (legend) this.legendBounds = parseBounds(this.context, legend);
+				if (legend) {
+					const legendBounds = parseBounds(this.context, legend);
+					this.legendBounds = legendBounds;
+					const borderBoxTop = legendBounds.top + legendBounds.height / 2 - this.styles.borderTopWidth / 2;
+					this.bounds = new Bounds(this.bounds.left, borderBoxTop, this.bounds.width, this.bounds.height - (borderBoxTop - this.bounds.top));
+				}
 			}
 			if (isDebugging(element, 4)) this.debugRender = true;
 		}
@@ -10360,13 +10387,57 @@
 				new Vector(bounds.left, bounds.top + bounds.height)
 			]);
 			ctx.clip();
-			textRenderer.renderTextWithLetterSpacing(new TextBounds(container.value, textBounds), styles.letterSpacing, baseline, styles.writingMode);
+			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;
+				const lineWidth = ctx.measureText(line).width;
+				switch (styles.textAlign) {
+					case 1:
+						lineX += (bounds.width - lineWidth) / 2;
+						break;
+					case 2:
+						lineX += bounds.width - lineWidth;
+						break;
+				}
+				const lineBounds = new Bounds(lineX, textBounds.top + index * lineHeight, 0, 0);
+				textRenderer.renderTextWithLetterSpacing(new TextBounds(line, lineBounds), styles.letterSpacing, baseline, styles.writingMode);
+			});
 			ctx.restore();
 			ctx.textBaseline = "alphabetic";
 			ctx.textAlign = "left";
 		}
 	}
 	/**
+	* 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.
+	* @internal exported for testing
+	*/
+	const wrapTextToWidth = (ctx, text, maxWidth, noWrap) => {
+		const lines = [];
+		const paragraphs = text.split("\n");
+		for (const paragraph of paragraphs) {
+			if (noWrap) {
+				lines.push(paragraph);
+				continue;
+			}
+			const words = paragraph.split(/(\s+)/);
+			let line = "";
+			for (const word of words) {
+				const candidate = line + word;
+				if (ctx.measureText(candidate).width <= maxWidth || line === "") line = candidate;
+				else {
+					lines.push(line);
+					line = word;
+				}
+			}
+			lines.push(line);
+		}
+		return lines;
+	};
+	/**
 	* Render list-item marker (image or text).
 	*/
 	async function renderListMarker(ctx, context, textRenderer, paint, container, styles) {
@@ -10964,7 +11035,8 @@
 			const originChecker = this.context.originChecker;
 			const defaultIsSameOrigin = (src) => originChecker.isSameOrigin(src);
 			const isSameOrigin = typeof this._options.customIsSameOrigin === "function" ? await this._options.customIsSameOrigin(key, defaultIsSameOrigin) : defaultIsSameOrigin(key);
-			const useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
+			const canAttemptCors = !isSameOrigin && this._options.allowTaint === false && !isInlineImage(key) && !isBlobImage(key) && typeof this._options.proxy !== "string";
+			const useCORS = !isInlineImage(key) && (this._options.useCORS === true || canAttemptCors) && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
 			const useProxy = !isInlineImage(key) && !isSameOrigin && !isBlobImage(key) && typeof this._options.proxy === "string" && FEATURES.SUPPORT_CORS_XHR && !useCORS;
 			if (!isSameOrigin && this._options.allowTaint === false && !isInlineImage(key) && !isBlobImage(key) && !useProxy && !useCORS) return;
 			let src = key;