html2canvas-pro 2.3.8 → 2.4.0

package/dist/lib/dom/document-cloner.js

@@ -67,11 +67,6 @@ class DocumentCloner {
             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);
-                }
             }
             const onclone = this.options.onclone;
             const referenceElement = this.clonedReferenceElement;
@@ -85,9 +80,16 @@ class DocumentCloner {
                 await imagesReady(documentClone);
             }
             if (typeof onclone === 'function') {
-                return Promise.resolve()
-                    .then(() => onclone(documentClone, referenceElement))
-                    .then(() => iframe);
+                await Promise.resolve().then(() => onclone(documentClone, referenceElement));
+            }
+            // onclone can change layout above the viewport and trigger browser scroll
+            // anchoring. Reapply the requested offset after the callback so element
+            // bounds stay aligned with the window bounds used by the renderer.
+            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;
         });

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

@@ -187,14 +187,17 @@ class CanvasRenderer {
     }
     mask(paths) {
         this.ctx.beginPath();
-        this.ctx.moveTo(0, 0);
-        // Use logical dimensions (options.width/height) instead of canvas pixel dimensions
-        // because context has already been scaled by this.options.scale
-        // Fix for Issue #126: Using canvas pixel dimensions causes broken output
-        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);
+        // Anchor the mask rectangle to (options.x, options.y) instead of (0, 0)
+        // because ctx.translate(-options.x, -options.y) shifts the coordinate system.
+        // Fix for Issue #230: inset box-shadow rendering was inverted for elements
+        // not at document origin due to the mask covering the wrong region.
+        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();
     }

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapTextToWidth = void 0;
+exports.wrapTextToWidth = exports.inputTextClipBounds = void 0;
 exports.renderReplacedElements = renderReplacedElements;
 exports.renderFormElements = renderFormElements;
 exports.renderListMarker = renderListMarker;
@@ -107,12 +107,16 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
         const [font] = textRenderer.createFontStyle(styles);
         // Use Canvas API to measure baseline from the actual rendered font
         ctx.font = font;
-        const baseline = (0, font_utils_1.measureBaseline)(ctx, (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0));
+        const fontSizeValue = (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0);
+        const { baseline, height: fontHeight } = (0, font_utils_1.measureFontMetrics)(ctx, fontSizeValue);
         const isPlaceholder = container instanceof input_element_container_1.InputElementContainer && container.isPlaceholder;
         ctx.fillStyle = isPlaceholder ? (0, color_utilities_1.asString)(input_element_container_1.PLACEHOLDER_COLOR) : (0, color_utilities_1.asString)(styles.color);
         ctx.textBaseline = 'alphabetic';
         ctx.textAlign = canvasTextAlign(container.styles.textAlign);
         const bounds = (0, box_sizing_1.contentBox)(container);
+        const clipBounds = container instanceof input_element_container_1.InputElementContainer
+            ? (0, exports.inputTextClipBounds)(bounds, (0, box_sizing_1.paddingBox)(container), fontHeight)
+            : bounds;
         let x = 0;
         switch (container.styles.textAlign) {
             case 1 /* TEXT_ALIGN.CENTER */:
@@ -124,16 +128,15 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
         }
         let verticalOffset = 0;
         if (container instanceof input_element_container_1.InputElementContainer) {
-            const fontSizeValue = (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0);
-            verticalOffset = (bounds.height - fontSizeValue) / 2;
+            verticalOffset = (bounds.height - fontHeight) / 2;
         }
         const textBounds = bounds.add(x, verticalOffset, 0, 0);
         ctx.save();
         pathFn([
-            new vector_1.Vector(bounds.left, bounds.top),
-            new vector_1.Vector(bounds.left + bounds.width, bounds.top),
-            new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height),
-            new vector_1.Vector(bounds.left, bounds.top + bounds.height)
+            new vector_1.Vector(clipBounds.left, clipBounds.top),
+            new vector_1.Vector(clipBounds.left + clipBounds.width, clipBounds.top),
+            new vector_1.Vector(clipBounds.left + clipBounds.width, clipBounds.top + clipBounds.height),
+            new vector_1.Vector(clipBounds.left, clipBounds.top + clipBounds.height)
         ]);
         ctx.clip();
         // A <textarea> soft-wraps its value at the element width (unless
@@ -141,7 +144,6 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
         // 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;
@@ -162,6 +164,17 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
         ctx.textAlign = 'left';
     }
 }
+/**
+ * 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_1.Bounds(contentBounds.left, inputPaddingBox.top, contentBounds.width, inputPaddingBox.height)
+    : contentBounds;
+exports.inputTextClipBounds = inputTextClipBounds;
 /**
  * Split text into lines that fit the given pixel width, preserving hard line
  * breaks and (when wrapping is enabled) breaking at word boundaries — mirroring

package/dist/lib/render/canvas/font-utils.js

@@ -2,8 +2,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+)
@@ -11,8 +11,28 @@
  *   3. fallback value — coarse CSS fallback
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.measureBaseline = void 0;
+exports.measureBaseline = exports.measureFontMetrics = void 0;
 const SAMPLE_TEXT = 'Mg'; // characters with both ascender and descender
+const isValidMetric = (value) => value !== undefined && !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;
+    const baseline = isValidMetric(fontMetrics.fontBoundingBoxAscent)
+        ? fontMetrics.fontBoundingBoxAscent
+        : isValidMetric(tm.actualBoundingBoxAscent)
+            ? tm.actualBoundingBoxAscent
+            : fallback;
+    const height = isValidMetric(fontMetrics.fontBoundingBoxAscent) && isValidMetric(fontMetrics.fontBoundingBoxDescent)
+        ? fontMetrics.fontBoundingBoxAscent + fontMetrics.fontBoundingBoxDescent
+        : isValidMetric(tm.actualBoundingBoxAscent) && isValidMetric(tm.actualBoundingBoxDescent)
+            ? tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
+            : fallback;
+    return { baseline, height };
+};
+exports.measureFontMetrics = measureFontMetrics;
 /**
  * Measure the baseline ascent for the currently set font.
  *
@@ -21,9 +41,6 @@ const SAMPLE_TEXT = 'Mg'; // characters with both ascender and descender
  * @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 !== undefined && !Number.isNaN(fmAscent) ? fmAscent : tm.actualBoundingBoxAscent;
-    return ascent !== undefined && !Number.isNaN(ascent) ? ascent : fallback;
+    return (0, exports.measureFontMetrics)(ctx, fallback).baseline;
 };
 exports.measureBaseline = measureBaseline;

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

@@ -1,6 +1,7 @@
 import { ElementPaint } from '../stacking-context';
 import { ReplacedElementContainer } from '../../dom/replaced-elements';
 import { ElementContainer } from '../../dom/element-container';
+import { Bounds } from '../../css/layout/bounds';
 import { BoundCurves } from '../bound-curves';
 import { Vector } from '../vector';
 import { Context } from '../../core/context';
@@ -36,6 +37,14 @@ 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;
+/**
+ * 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
+ */
+export declare const inputTextClipBounds: (contentBounds: Bounds, inputPaddingBox: Bounds, fontHeight: number) => Bounds;
 /**
  * Split text into lines that fit the given pixel width, preserving hard line
  * breaks and (when wrapping is enabled) breaking at word boundaries — mirroring

package/dist/types/render/canvas/font-utils.d.ts

@@ -1,14 +1,22 @@
 /**
  * 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+)
  *   2. actualBoundingBoxAscent — glyph-level metric (widely supported)
  *   3. fallback value — coarse CSS fallback
  */
+export interface CanvasFontMetrics {
+    baseline: number;
+    height: number;
+}
+/**
+ * Measure the baseline ascent and full font box for the currently set font.
+ */
+export declare const measureFontMetrics: (ctx: CanvasRenderingContext2D, fallback: number) => CanvasFontMetrics;
 /**
  * Measure the baseline ascent for the currently set font.
  *

package/package.json

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