html2canvas-pro 1.5.5 → 1.5.7

package/README.md

@@ -1,19 +1,36 @@
-# html2canvas-pro
-
-[![npm version](https://badgen.net/npm/v/html2canvas-pro)](https://npm.im/html2canvas-pro) [![npm downloads](https://badgen.net/npm/dm/html2canvas-pro)](https://npm.im/html2canvas-pro)
-
-> A fork of [niklasvh/html2canvas](https://github.com/niklasvh/html2canvas) with some new features. If you found this helpful, don't forget to leave a star.
-
-## 🌟 Why html2canvas-pro?
-
-html2canvas-pro has several advantages over html2canvas, including:
+<p align="center">
+<img src="https://raw.githubusercontent.com/yorickshan/html2canvas-pro/main/docs/public/logo.png" height="150">
+</p>
+<h1 align="center">
+html2canvas-pro
+</h1>
+<p align="center">
+Next generation JavaScript screenshots tool.
+<p>
+<p align="center">
+  <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>
+</p>
+<br>
+
+## Why html2canvas-pro?
+
+html2canvas-pro is a fork of [niklasvh/html2canvas](https://github.com/niklasvh/html2canvas) that includes various fixes and new features. It offers several advantages over the original html2canvas, such as:
 - support color function ```color()``` (including relative colors)
 - support color function ```lab()```
 - support color function ```lch()```
 - support color function ```oklab()```
 - support color function ```oklch()```
 - Support object-fit of ```<img/>```
-- Fixed some known [issues](./CHANGELOG.md)
+- Fixed some [issues](./CHANGELOG.md)
+
+If you found this helpful, don't forget to
+leave a star 🌟.
 
 ## Installation
 
@@ -27,7 +44,7 @@ pnpm / yarn add html2canvas-pro
 import html2canvas from 'html2canvas-pro';
 ```
 
-To render an `element` with html2canvas with some (optional) [options](/docs/configuration.md), simply call `html2canvas(element, options);`
+To render an `element` with html2canvas-pro with some (optional) [options](/docs/configuration.md), simply call `html2canvas(element, options);`
 
 ```javascript
 html2canvas(document.body).then(function(canvas) {

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.5.5 <undefined>
+ * undefined 1.5.7 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024 yorickshan <https://github.com/yorickshan>
  * Released under MIT License
  */
@@ -2554,7 +2554,7 @@ var _color = function (context, args) {
                         .replace(/r|x/, color[0].toString())
                         .replace(/g|y/, color[1].toString())
                         .replace(/b|z/, color[2].toString());
-                    return eval(expression);
+                    return new Function('return ' + expression)();
                 }
             }
             return null;
@@ -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,15 @@ 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 _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) {
@@ -7620,20 +7629,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;
                                         }
                                     });
@@ -8759,5 +8766,5 @@ var parseBackgroundColor = function (context, element, backgroundColorOverride)
         : defaultBackgroundColor;
 };
 
-export default html2canvas;
+export { html2canvas as default };
 //# sourceMappingURL=html2canvas-pro.esm.js.map