html2canvas-pro 2.3.6 → 2.3.8

package/dist/lib/core/cache-storage.js

@@ -176,7 +176,22 @@ class Cache {
         const isSameOrigin = typeof this._options.customIsSameOrigin === 'function'
             ? await this._options.customIsSameOrigin(key, defaultIsSameOrigin)
             : defaultIsSameOrigin(key);
-        const useCORS = !isInlineImage(key) && this._options.useCORS === true && features_1.FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
+        // With allowTaint disabled (the default), a cross-origin image is safe to
+        // draw only when the server sends CORS headers. Instead of skipping such
+        // images outright, still ATTEMPT a CORS load: it succeeds for CORS-enabled
+        // hosts (CDNs, avatar services, picsum, ...) and fails cleanly for hosts
+        // without CORS headers, where the image is skipped exactly as before
+        // (issue #229). An explicit proxy takes precedence so existing setups
+        // that rely on proxying keep working.
+        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_1.FEATURES.SUPPORT_CORS_IMAGES &&
+            !isSameOrigin;
         const useProxy = !isInlineImage(key) &&
             !isSameOrigin &&
             !isBlobImage(key) &&

package/dist/lib/css/index.js

@@ -36,6 +36,7 @@ const transform_origin_1 = require("./property-descriptors/transform-origin");
 const rotate_1 = require("./property-descriptors/rotate");
 const visibility_1 = require("./property-descriptors/visibility");
 const word_break_1 = require("./property-descriptors/word-break");
+const white_space_1 = require("./property-descriptors/white-space");
 const writing_mode_1 = require("./property-descriptors/writing-mode");
 const z_index_1 = require("./property-descriptors/z-index");
 const parser_1 = require("./syntax/parser");
@@ -227,6 +228,7 @@ CSSParsedDeclaration.standardProps = [
     ['webkitTextStrokeWidth', webkit_text_stroke_width_1.webkitTextStrokeWidth, 'webkitTextStrokeWidth'],
     ['webkitLineClamp', webkit_line_clamp_1.webkitLineClamp, 'webkitLineClamp'],
     ['wordBreak', word_break_1.wordBreak, 'wordBreak'],
+    ['whiteSpace', white_space_1.whiteSpace, 'whiteSpace'],
     ['writingMode', writing_mode_1.writingMode, 'writingMode'],
     ['zIndex', z_index_1.zIndex, 'zIndex'],
     ['objectFit', object_fit_1.objectFit, 'objectFit'],

package/dist/lib/css/property-descriptors/white-space.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.whiteSpace = exports.WHITE_SPACE = void 0;
+var WHITE_SPACE;
+(function (WHITE_SPACE) {
+    WHITE_SPACE["NORMAL"] = "normal";
+    WHITE_SPACE["PRE"] = "pre";
+    WHITE_SPACE["NOWRAP"] = "nowrap";
+    WHITE_SPACE["PRE_WRAP"] = "pre-wrap";
+    WHITE_SPACE["PRE_LINE"] = "pre-line";
+})(WHITE_SPACE || (exports.WHITE_SPACE = WHITE_SPACE = {}));
+exports.whiteSpace = {
+    name: 'white-space',
+    initialValue: 'normal',
+    prefix: false,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
+    parse: (_context, value) => {
+        switch (value) {
+            case 'pre':
+                return WHITE_SPACE.PRE;
+            case 'nowrap':
+                return WHITE_SPACE.NOWRAP;
+            case 'pre-wrap':
+                return WHITE_SPACE.PRE_WRAP;
+            case 'pre-line':
+                return WHITE_SPACE.PRE_LINE;
+            case 'normal':
+            default:
+                return WHITE_SPACE.NORMAL;
+        }
+    }
+};

package/dist/lib/dom/element-container.js

@@ -28,7 +28,16 @@ class ElementContainer {
         if (element.tagName === 'FIELDSET') {
             const legend = element.querySelector(':scope > legend');
             if (legend) {
-                this.legendBounds = (0, bounds_1.parseBounds)(this.context, legend);
+                const legendBounds = (0, bounds_1.parseBounds)(this.context, legend);
+                this.legendBounds = legendBounds;
+                // A <fieldset>'s legend is centered on its top border line and
+                // overflows ABOVE it. Chrome's getBoundingClientRect() for the
+                // fieldset includes that overflow, so bounds.top is too high and
+                // the border would be drawn above the legend. Shift the bounds so
+                // the top border sits at the legend's vertical center, matching
+                // how the browser renders fieldset + legend (issue #227).
+                const borderBoxTop = legendBounds.top + legendBounds.height / 2 - this.styles.borderTopWidth / 2;
+                this.bounds = new bounds_1.Bounds(this.bounds.left, borderBoxTop, this.bounds.width, this.bounds.height - (borderBoxTop - this.bounds.top));
             }
         }
         if ((0, debugger_1.isDebugging)(element, 4 /* DebuggerType.RENDER */)) {

package/dist/lib/render/canvas/content-renderer.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapTextToWidth = void 0;
 exports.renderReplacedElements = renderReplacedElements;
 exports.renderFormElements = renderFormElements;
 exports.renderListMarker = renderListMarker;
@@ -19,6 +20,7 @@ const font_utils_1 = require("./font-utils");
 const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
 const length_percentage_1 = require("../../css/types/length-percentage");
 const line_height_1 = require("../../css/property-descriptors/line-height");
+const white_space_1 = require("../../css/property-descriptors/white-space");
 const bitwise_1 = require("../../core/bitwise");
 /**
  * Render replaced elements: Image, Canvas, SVG, IFrame.
@@ -134,12 +136,63 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
             new vector_1.Vector(bounds.left, bounds.top + bounds.height)
         ]);
         ctx.clip();
-        textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline, styles.writingMode);
+        // A <textarea> soft-wraps its value at the element width (unless
+        // white-space is `pre`/`nowrap`, e.g. wrap="off"); text inputs are
+        // single-line. Render textareas line-by-line so long values wrap
+        // instead of being clipped on one line (issue #228).
+        const lines = (0, exports.wrapTextToWidth)(ctx, container.value, bounds.width, styles.whiteSpace === white_space_1.WHITE_SPACE.PRE || styles.whiteSpace === white_space_1.WHITE_SPACE.NOWRAP);
+        const fontSizeValue = (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0);
+        const lineHeight = (0, line_height_1.computeLineHeight)(styles.lineHeight, fontSizeValue);
+        lines.forEach((line, index) => {
+            let lineX = textBounds.left;
+            const lineWidth = ctx.measureText(line).width;
+            switch (styles.textAlign) {
+                case 1 /* TEXT_ALIGN.CENTER */:
+                    lineX += (bounds.width - lineWidth) / 2;
+                    break;
+                case 2 /* TEXT_ALIGN.RIGHT */:
+                    lineX += bounds.width - lineWidth;
+                    break;
+            }
+            const lineBounds = new bounds_1.Bounds(lineX, textBounds.top + index * lineHeight, 0, 0);
+            textRenderer.renderTextWithLetterSpacing(new text_1.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;
+};
+exports.wrapTextToWidth = wrapTextToWidth;
 /**
  * Render list-item marker (image or text).
  */

package/dist/types/css/index.d.ts

@@ -27,6 +27,7 @@ import { transformOrigin } from './property-descriptors/transform-origin';
 import { rotate } from './property-descriptors/rotate';
 import { visibility } from './property-descriptors/visibility';
 import { wordBreak } from './property-descriptors/word-break';
+import { whiteSpace } from './property-descriptors/white-space';
 import { writingMode } from './property-descriptors/writing-mode';
 import { zIndex } from './property-descriptors/z-index';
 import { CSSValue } from './syntax/parser';
@@ -141,6 +142,7 @@ export declare class CSSParsedDeclaration {
     webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
     webkitLineClamp: ReturnType<typeof webkitLineClamp.parse>;
     wordBreak: ReturnType<typeof wordBreak.parse>;
+    whiteSpace: ReturnType<typeof whiteSpace.parse>;
     writingMode: ReturnType<typeof writingMode.parse>;
     zIndex: ReturnType<typeof zIndex.parse>;
     objectFit: ReturnType<typeof objectFit.parse>;

package/dist/types/css/property-descriptors/white-space.d.ts

@@ -0,0 +1,9 @@
+import { IPropertyIdentValueDescriptor } from '../property-descriptor';
+export declare enum WHITE_SPACE {
+    NORMAL = "normal",
+    PRE = "pre",
+    NOWRAP = "nowrap",
+    PRE_WRAP = "pre-wrap",
+    PRE_LINE = "pre-line"
+}
+export declare const whiteSpace: IPropertyIdentValueDescriptor<WHITE_SPACE>;

package/dist/types/render/canvas/content-renderer.d.ts

@@ -36,6 +36,13 @@ export declare function renderReplacedElements(ctx: CanvasRenderingContext2D, co
  * Render form element content: checkbox, radio, text input.
  */
 export declare function renderFormElements(ctx: CanvasRenderingContext2D, textRenderer: TextRenderer, pathFn: (paths: Vector[]) => void, container: ElementContainer, styles: CSSParsedDeclaration): void;
+/**
+ * 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
+ */
+export declare const wrapTextToWidth: (ctx: CanvasRenderingContext2D, text: string, maxWidth: number, noWrap: boolean) => string[];
 /**
  * Render list-item marker (image or text).
  */

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.3.6",
+  "version": "2.3.8",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",