html2canvas-pro 1.5.6 → 1.5.8

package/README.md

@@ -11,6 +11,7 @@ Next generation JavaScript screenshots tool.
   <a href="https://github.com/yorickshan/html2canvas-pro/actions/workflows/ci.yml"><img src="https://github.com/yorickshan/html2canvas-pro/actions/workflows/ci.yml/badge.svg?branch=main" alt="build status"></a>
   <a href=https://npm.im/html2canvas-pro><img src="https://badgen.net/npm/v/html2canvas-pro" alt="npm version"></a>
   <a href=http://npm.im/html2canvas-pro><img src="https://badgen.net/npm/dm/html2canvas-pro" alt="npm downloads"></a>
+  <a href="https://www.jsdelivr.com/package/npm/html2canvas-pro"><img src="https://data.jsdelivr.com/v1/package/npm/html2canvas-pro/badge" /></a>
 <p>
 <p align="center">
  <a href="https://yorickshan.github.io/html2canvas-pro/">Documentation</a> | <a href="https://yorickshan.github.io/html2canvas-pro/getting-started.html">Getting Started</a>

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * undefined 1.5.6 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 1.5.8 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024 yorickshan <https://github.com/yorickshan>
  * Released under MIT License
  */
@@ -5569,7 +5569,8 @@ var LIST_OWNERS = ['OL', 'UL', 'MENU'];
 var parseNodeTree = function (context, node, parent, root) {
     for (var childNode = node.firstChild, nextNode = void 0; childNode; childNode = nextNode) {
         nextNode = childNode.nextSibling;
-        if (isTextNode(childNode) && childNode.data.trim().length > 0) {
+        // Fixes #2238 #1624 - Fix the issue of TextNode content being overlooked in rendering due to being perceived as blank by trim().
+        if (isTextNode(childNode) && childNode.data.length > 0) {
             parent.textNodes.push(new TextContainer(context, childNode, parent.styles));
         }
         else if (isElementNode(childNode)) {
@@ -7559,7 +7560,15 @@ var CanvasRenderer = /** @class */ (function (_super) {
     CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
         var _this = this;
         if (letterSpacing === 0) {
-            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
+            // 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);
+            }
         }
         else {
             var letters = segmentGraphemes(text.text);
@@ -7585,15 +7594,14 @@ var CanvasRenderer = /** @class */ (function (_super) {
     };
     CanvasRenderer.prototype.renderTextNode = function (text, styles) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, font, fontFamily, fontSize, _b, baseline, middle, paintOrder;
+            var font, paintOrder;
             var _this = this;
-            return __generator(this, function (_c) {
-                _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
+            return __generator(this, function (_a) {
+                font = this.createFontStyle(styles)[0];
                 this.ctx.font = font;
                 this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
                 this.ctx.textAlign = 'left';
                 this.ctx.textBaseline = 'alphabetic';
-                _b = this.fontMetrics.getMetrics(fontFamily, fontSize), baseline = _b.baseline, middle = _b.middle;
                 paintOrder = styles.paintOrder;
                 text.textBounds.forEach(function (text) {
                     paintOrder.forEach(function (paintOrderLayer) {
@@ -7620,20 +7628,18 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                 }
                                 if (styles.textDecorationLine.length) {
                                     _this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+                                    var decorationLineHeight_1 = 1;
                                     styles.textDecorationLine.forEach(function (textDecorationLine) {
+                                        // Fix the issue where textDecorationLine exhibits x-axis positioning errors on high-resolution devices due to varying devicePixelRatio, corrected by using relative values of element heights.
                                         switch (textDecorationLine) {
                                             case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
-                                                // Draws a line at the baseline of the font
-                                                // TODO As some browsers display the line as more than 1px if the font-size is big,
-                                                // need to take that into account both in position and size
-                                                _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top + baseline), text.bounds.width, 1);
+                                                _this.ctx.fillRect(text.bounds.left, text.bounds.top + text.bounds.height - decorationLineHeight_1, text.bounds.width, decorationLineHeight_1);
                                                 break;
                                             case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
-                                                _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
+                                                _this.ctx.fillRect(text.bounds.left, text.bounds.top, text.bounds.width, decorationLineHeight_1);
                                                 break;
                                             case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
-                                                // TODO try and find exact position for line-through
-                                                _this.ctx.fillRect(text.bounds.left, Math.ceil(text.bounds.top + middle), text.bounds.width, 1);
+                                                _this.ctx.fillRect(text.bounds.left, text.bounds.top + (text.bounds.height / 2 - decorationLineHeight_1 / 2), text.bounds.width, decorationLineHeight_1);
                                                 break;
                                         }
                                     });
@@ -7645,7 +7651,7 @@ 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 + baseline);
+                                    _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
                                 }
                                 _this.ctx.strokeStyle = '';
                                 _this.ctx.lineWidth = 0;