html2canvas-pro 1.5.6 → 1.5.7

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
- * undefined 1.5.6 <https://yorickshan.github.io/html2canvas-pro/>
+ * undefined 1.5.7 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024 yorickshan <https://github.com/yorickshan>
  * Released under MIT License
  */
@@ -5575,7 +5575,8 @@
     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)) {
@@ -7565,7 +7566,15 @@
         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);
@@ -7591,15 +7600,15 @@
         };
         CanvasRenderer.prototype.renderTextNode = function (text, styles) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, font, fontFamily, fontSize, _b, baseline, middle, paintOrder;
+                var _a, font, fontFamily, fontSize, baseline, paintOrder;
                 var _this = this;
-                return __generator(this, function (_c) {
+                return __generator(this, function (_b) {
                     _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
                     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;
+                    baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
                     paintOrder = styles.paintOrder;
                     text.textBounds.forEach(function (text) {
                         paintOrder.forEach(function (paintOrderLayer) {
@@ -7626,20 +7635,18 @@
                                     }
                                     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;
                                             }
                                         });