html2canvas-pro 2.3.7 → 2.3.9

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.7 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.3.9 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -5160,6 +5160,23 @@ const wordBreak = {
 	}
 };
 //#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;
@@ -6600,6 +6617,11 @@ var CSSParsedDeclaration = class CSSParsedDeclaration {
 				wordBreak,
 				"wordBreak"
 			],
+			[
+				"whiteSpace",
+				whiteSpace,
+				"whiteSpace"
+			],
 			[
 				"writingMode",
 				writingMode,
@@ -10358,13 +10380,57 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
 			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) {
@@ -10532,11 +10598,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();
 	}
@@ -10962,7 +11030,8 @@ var Cache = class {
 		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;