html2canvas-pro 1.5.13 → 1.6.0

package/README.md

@@ -47,12 +47,32 @@ import html2canvas from 'html2canvas-pro';
 
 To render an `element` with html2canvas-pro with some (optional) [options](/docs/configuration.md), simply call `html2canvas(element, options);`
 
+### Basic Example
+
 ```javascript
 html2canvas(document.body).then(function(canvas) {
     document.body.appendChild(canvas);
 });
 ```
 
+### Controlling Output Dimensions
+
+⚠️ **Important**: By default, the output canvas dimensions are affected by `devicePixelRatio`. 
+
+```javascript
+// If you need exact pixel dimensions (e.g., for a specific file size):
+html2canvas(element, {
+    width: 1920,
+    height: 1080,
+    scale: 1  // Set scale to 1 for exact dimensions
+}).then(canvas => {
+    // Canvas will be exactly 1920×1080 pixels
+    const dataURL = canvas.toDataURL('image/png');
+});
+```
+
+See the [Configuration Guide](/docs/configuration.md#canvas-dimensions) for more details.
+
 ## Contribution
 
 If you want to add some features, feel free to submit PR.

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.5.13 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 1.6.0 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
@@ -112,7 +112,19 @@ var Bounds = /** @class */ (function () {
         return new Bounds(clientRect.left + context.windowBounds.left, clientRect.top + context.windowBounds.top, clientRect.width, clientRect.height);
     };
     Bounds.fromDOMRectList = function (context, domRectList) {
-        var domRect = Array.from(domRectList).find(function (rect) { return rect.width !== 0; });
+        var rects = Array.from(domRectList);
+        // First try to find a rect with non-zero width
+        var domRect = rects.find(function (rect) { return rect.width !== 0; });
+        // If not found, try to find a rect with non-zero height
+        // This handles cases like inline-flex with single child where width might be 0
+        if (!domRect) {
+            domRect = rects.find(function (rect) { return rect.height !== 0; });
+        }
+        // If still not found but rects exist, use the first rect
+        // Position info (left, top) might still be valid even if dimensions are 0
+        if (!domRect && rects.length > 0) {
+            domRect = rects[0];
+        }
         return domRect
             ? new Bounds(domRect.left + context.windowBounds.left, domRect.top + context.windowBounds.top, domRect.width, domRect.height)
             : Bounds.EMPTY;
@@ -1604,6 +1616,94 @@ var isLength = function (token) {
 var isLengthPercentage = function (token) {
     return token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || isLength(token);
 };
+/**
+ * Check if a token is a calc() function
+ */
+var isCalcFunction = function (token) {
+    return token.type === 18 /* TokenType.FUNCTION */ && token.name === 'calc';
+};
+/**
+ * Evaluate a calc() expression and convert to LengthPercentage token
+ * Supports basic arithmetic: +, -, *, /
+ * Note: Percentages in calc() are converted based on a context value
+ */
+var evaluateCalcToLengthPercentage = function (calcToken, contextValue) {
+    if (contextValue === void 0) { contextValue = 0; }
+    // Build expression string from tokens
+    var buildExpression = function (values) {
+        var expression = '';
+        for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
+            var value = values_1[_i];
+            if (value.type === 31 /* TokenType.WHITESPACE_TOKEN */) {
+                continue;
+            }
+            if (value.type === 18 /* TokenType.FUNCTION */) {
+                if (value.name === 'calc') {
+                    var nested = buildExpression(value.values);
+                    if (nested === null)
+                        return null;
+                    expression += "(".concat(nested, ")");
+                }
+                else {
+                    return null;
+                }
+            }
+            else if (value.type === 17 /* TokenType.NUMBER_TOKEN */) {
+                expression += value.number.toString();
+            }
+            else if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+                // Convert units to px
+                if (value.unit === 'px') {
+                    expression += value.number.toString();
+                }
+                else if (value.unit === 'rem' || value.unit === 'em') {
+                    expression += (value.number * 16).toString();
+                }
+                else {
+                    expression += value.number.toString();
+                }
+            }
+            else if (value.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
+                // Convert percentage to absolute value based on context
+                expression += ((value.number / 100) * contextValue).toString();
+            }
+            else if (value.type === 6 /* TokenType.DELIM_TOKEN */) {
+                var op = value.value;
+                if (op === '+' || op === '-' || op === '*' || op === '/') {
+                    expression += " ".concat(op, " ");
+                }
+                else if (op === '(') {
+                    expression += '(';
+                }
+                else if (op === ')') {
+                    expression += ')';
+                }
+            }
+        }
+        return expression;
+    };
+    try {
+        var expression = buildExpression(calcToken.values);
+        if (expression === null || expression.trim() === '') {
+            return null;
+        }
+        // Evaluate the expression
+        // Note: Using Function constructor (similar to color.ts line 185)
+        var result = new Function('return ' + expression)();
+        if (typeof result === 'number' && !isNaN(result)) {
+            // Return as a number token in px
+            return {
+                type: 17 /* TokenType.NUMBER_TOKEN */,
+                number: result,
+                flags: FLAG_INTEGER
+            };
+        }
+    }
+    catch (e) {
+        return null;
+    }
+    return null;
+};
 var parseLengthPercentageTuple = function (tokens) {
     return tokens.length > 1 ? [tokens[0], tokens[1]] : [tokens[0]];
 };
@@ -3344,7 +3444,20 @@ var backgroundPosition = {
     prefix: false,
     parse: function (_context, tokens) {
         return parseFunctionArgs(tokens)
-            .map(function (values) { return values.filter(isLengthPercentage); })
+            .map(function (values) {
+            // Convert calc() to length-percentage tokens, keep other length-percentage as is
+            return values
+                .map(function (value) {
+                if (isCalcFunction(value)) {
+                    // For calc() at parse time, we can't know the container size
+                    // So we evaluate with 0 context which will work for px-only calc()
+                    // Percentage-based calc() will need special handling
+                    return evaluateCalcToLengthPercentage(value, 0);
+                }
+                return isLengthPercentage(value) ? value : null;
+            })
+                .filter(function (v) { return v !== null; });
+        })
             .map(parseLengthPercentageTuple);
     }
 };
@@ -5700,7 +5813,19 @@ var createsRealStackingContext = function (node, container, root) {
         container.styles.isTransformed() ||
         (isBodyElement(node) && root.styles.isTransparent()));
 };
-var createsStackingContext = function (styles) { return styles.isPositioned() || styles.isFloating(); };
+var createsStackingContext = function (styles) {
+    // Positioned and floating elements create stacking contexts
+    if (styles.isPositioned() || styles.isFloating()) {
+        return true;
+    }
+    // Fix for Issue #137: Inline-level containers (inline-flex, inline-block, etc.)
+    // should create stacking contexts to prevent their children from being added
+    // to the parent's stacking context, which causes rendering order issues
+    return (contains(styles.display, 268435456 /* DISPLAY.INLINE_FLEX */) ||
+        contains(styles.display, 33554432 /* DISPLAY.INLINE_BLOCK */) ||
+        contains(styles.display, 536870912 /* DISPLAY.INLINE_GRID */) ||
+        contains(styles.display, 134217728 /* DISPLAY.INLINE_TABLE */));
+};
 var isTextNode = function (node) { return node.nodeType === Node.TEXT_NODE; };
 var isElementNode = function (node) { return node.nodeType === Node.ELEMENT_NODE; };
 var isHTMLElementNode = function (node) {
@@ -7063,8 +7188,9 @@ var ElementPaint = /** @class */ (function () {
             this.effects.push(new OpacityEffect(this.container.styles.opacity));
         }
         if (this.container.styles.rotate !== null) {
-            var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
-            var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
+            var origin_1 = this.container.styles.transformOrigin;
+            var offsetX = this.container.bounds.left + getAbsoluteValue(origin_1[0], this.container.bounds.width);
+            var offsetY = this.container.bounds.top + getAbsoluteValue(origin_1[1], this.container.bounds.height);
             // Apply rotate property if present
             var angle = this.container.styles.rotate;
             var rad = (angle * Math.PI) / 180;
@@ -7074,8 +7200,9 @@ var ElementPaint = /** @class */ (function () {
             this.effects.push(new TransformEffect(offsetX, offsetY, rotateMatrix));
         }
         if (this.container.styles.transform !== null) {
-            var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
-            var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
+            var origin_2 = this.container.styles.transformOrigin;
+            var offsetX = this.container.bounds.left + getAbsoluteValue(origin_2[0], this.container.bounds.width);
+            var offsetY = this.container.bounds.top + getAbsoluteValue(origin_2[1], this.container.bounds.height);
             var matrix = this.container.styles.transform;
             this.effects.push(new TransformEffect(offsetX, offsetY, matrix));
         }
@@ -7646,15 +7773,9 @@ var CanvasRenderer = /** @class */ (function (_super) {
     CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
         var _this = this;
         if (letterSpacing === 0) {
-            // Fixed an issue with characters moving up in non-Firefox.
-            // https://github.com/niklasvh/html2canvas/issues/2107#issuecomment-692462900
-            if (navigator.userAgent.indexOf('Firefox') === -1) {
-                this.ctx.textBaseline = 'ideographic';
-                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
-            }
-            else {
-                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
-            }
+            // Use alphabetic baseline for consistent text positioning across browsers
+            // Issue #129: text.bounds.top + text.bounds.height causes text to render too low
+            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         }
         else {
             var letters = segmentGraphemes(text.text);
@@ -7737,7 +7858,19 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                     _this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     _this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                                    _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
+                                    // Issue #110: Use baseline (fontSize) for consistent positioning with fill
+                                    // Previously used text.bounds.height which caused stroke to render too low
+                                    var baseline_1 = styles.fontSize.number;
+                                    if (styles.letterSpacing === 0) {
+                                        _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline_1);
+                                    }
+                                    else {
+                                        var letters = segmentGraphemes(text.text);
+                                        letters.reduce(function (left, letter) {
+                                            _this.ctx.strokeText(letter, left, text.bounds.top + baseline_1);
+                                            return left + _this.ctx.measureText(letter).width;
+                                        }, text.bounds.left);
+                                    }
                                 }
                                 _this.ctx.strokeStyle = '';
                                 _this.ctx.lineWidth = 0;