html2canvas-pro 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.5.2](https://github.com/yorickshan/html2canvas-pro/compare/v1.5.1...v1.5.2) (2024-07-03)
+
+
+
+## 1.5.1 (2024-07-01)
+
+
+### Bug Fixes
+
+* operation is insecure on safari ([71f7c28](https://github.com/yorickshan/html2canvas-pro/commit/71f7c283dfe5a8cd64b39343bc7cec85e3932200))
+
+
+### Features
+
+* better color() support ([2559164](https://github.com/yorickshan/html2canvas-pro/commit/2559164c9890ea4985ce4cf09d27184da6ee22f8))
+* color functions ([1c9ece3](https://github.com/yorickshan/html2canvas-pro/commit/1c9ece3887e229eb69b34a5bb082c059355518e2))
+* complete work on relative from colors in the color() function ([ac6e331](https://github.com/yorickshan/html2canvas-pro/commit/ac6e33118be76734ff9b1f5cd92e147babd46548))
+* work on relative color support ([88e6aba](https://github.com/yorickshan/html2canvas-pro/commit/88e6abaa47b9c59e49a7bc3c0008849cc365f787))
+
+
+
 # Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

package/README.md

@@ -11,6 +11,7 @@ html2canvas-pro has several advantages over html2canvas, including:
 - support color function ```oklab()```
 - support color function ```oklch()```
 - Support object-fit of ```<img/>```
+- Fixed some known [issues](./CHANGELOG.md)
 
 ## Installation
 

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.5.0 <undefined>
+ * html2canvas-pro 1.5.2 <undefined>
  * Copyright (c) 2024 yorickshan <https://github.com/yorickshan>
  * Released under MIT License
  */
@@ -1803,17 +1803,33 @@ var extractLchComponents = function (args) {
 var extractLabComponents = function (args) {
     var tokens = args.filter(nonFunctionArgSeparator), 
     // eslint-disable-next-line prettier/prettier
-    l = tokens[0].type === 16 /* PERCENTAGE_TOKEN */ ? tokens[0].number / 100 : (isNumberToken(tokens[0]) ? tokens[0].number : 0), 
+    l = tokens[0].type === 16 /* PERCENTAGE_TOKEN */
+        ? tokens[0].number / 100
+        : isNumberToken(tokens[0])
+            ? tokens[0].number
+            : 0, 
     // eslint-disable-next-line prettier/prettier
-    a = tokens[1].type === 16 /* PERCENTAGE_TOKEN */ ? tokens[1].number / 100 : (isNumberToken(tokens[1]) ? tokens[1].number : 0), b = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, alpha = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+    a = tokens[1].type === 16 /* PERCENTAGE_TOKEN */
+        ? tokens[1].number / 100
+        : isNumberToken(tokens[1])
+            ? tokens[1].number
+            : 0, b = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, alpha = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
     return [l, a, b, alpha];
 };
 var extractOkLchComponents = function (args) {
     var tokens = args.filter(nonFunctionArgSeparator), 
     // eslint-disable-next-line prettier/prettier
-    l = tokens[0].type === 16 /* PERCENTAGE_TOKEN */ ? tokens[0].number / 100 : isNumberToken(tokens[0]) ? tokens[0].number : 0, 
+    l = tokens[0].type === 16 /* PERCENTAGE_TOKEN */
+        ? tokens[0].number / 100
+        : isNumberToken(tokens[0])
+            ? tokens[0].number
+            : 0, 
     // eslint-disable-next-line prettier/prettier
-    c = tokens[1].type === 16 /* PERCENTAGE_TOKEN */ ? tokens[1].number / 100 : isNumberToken(tokens[1]) ? tokens[1].number : 0, h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+    c = tokens[1].type === 16 /* PERCENTAGE_TOKEN */
+        ? tokens[1].number / 100
+        : isNumberToken(tokens[1])
+            ? tokens[1].number
+            : 0, h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
     return [l, c, h, a];
 };
 /**
@@ -1824,7 +1840,10 @@ var extractOkLchComponents = function (args) {
 var d65toD50 = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [1.0479297925449969, 0.022946870601609652, -0.05019226628920524, 0.02962780877005599, 0.9904344267538799, -0.017073799063418826, -0.009243040646204504, 0.015055191490298152, 0.7518742814281371], xyz);
+    [
+        1.0479297925449969, 0.022946870601609652, -0.05019226628920524, 0.02962780877005599, 0.9904344267538799,
+        -0.017073799063418826, -0.009243040646204504, 0.015055191490298152, 0.7518742814281371
+    ], xyz);
 };
 /**
  * Convert D50 to D65
@@ -1834,7 +1853,10 @@ var d65toD50 = function (xyz) {
 var d50toD65 = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [0.955473421488075, -0.02309845494876471, 0.06325924320057072, -0.0283697093338637, 1.0099953980813041, 0.021041441191917323, 0.012314014864481998, -0.020507649298898964, 1.330365926242124], xyz);
+    [
+        0.955473421488075, -0.02309845494876471, 0.06325924320057072, -0.0283697093338637, 1.0099953980813041,
+        0.021041441191917323, 0.012314014864481998, -0.020507649298898964, 1.330365926242124
+    ], xyz);
 };
 var hue2rgb = function (t1, t2, hue) {
     if (hue < 0) {
@@ -1889,10 +1911,16 @@ var lch2lab = function (_a) {
 var oklab2xyz = function (lab) {
     var LMSg = multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [1, 0.3963377773761749, 0.2158037573099136, 1, -0.1055613458156586, -0.0638541728258133, 1, -0.0894841775298119, -1.2914855480194092], lab), LMS = LMSg.map(function (val) { return Math.pow(val, 3); });
+    [
+        1, 0.3963377773761749, 0.2158037573099136, 1, -0.1055613458156586, -0.0638541728258133, 1,
+        -0.0894841775298119, -1.2914855480194092
+    ], lab), LMS = LMSg.map(function (val) { return Math.pow(val, 3); });
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [1.2268798758459243, -0.5578149944602171, 0.2813910456659647, -0.0405757452148008, 1.112286803280317, -0.0717110580655164, -0.0763729366746601, -0.4214933324022432, 1.5869240198367816], LMS);
+    [
+        1.2268798758459243, -0.5578149944602171, 0.2813910456659647, -0.0405757452148008, 1.112286803280317,
+        -0.0717110580655164, -0.0763729366746601, -0.4214933324022432, 1.5869240198367816
+    ], LMS);
 };
 /**
  * Convert Lab to D50-adapted XYZ
@@ -2029,7 +2057,10 @@ var convertXyz50 = function (args) {
 var xyz2rgbLinear = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [3.2409699419045226, -1.537383177570094, -0.4986107602930034, -0.9692436362808796, 1.8759675015077202, 0.04155505740717559, 0.05563007969699366, -0.20397695888897652, 1.0569715142428786], xyz);
+    [
+        3.2409699419045226, -1.537383177570094, -0.4986107602930034, -0.9692436362808796, 1.8759675015077202,
+        0.04155505740717559, 0.05563007969699366, -0.20397695888897652, 1.0569715142428786
+    ], xyz);
 };
 /**
  * Convert XYZ to linear-light sRGB
@@ -2039,7 +2070,10 @@ var xyz2rgbLinear = function (xyz) {
 var rgbLinear2xyz = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756, 0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607], xyz);
+    [
+        0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756,
+        0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607
+    ], xyz);
 };
 /**
  * Convert sRGB to RGB
@@ -2050,7 +2084,7 @@ var srgbLinear2rgb = function (rgb) {
     return rgb.map(function (c) {
         var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
         // eslint-disable-next-line prettier/prettier
-        return abs > 0.0031308 ? sign * (1.055 * (Math.pow(abs, (1 / 2.4))) - 0.055) : (12.92 * c);
+        return abs > 0.0031308 ? sign * (1.055 * Math.pow(abs, (1 / 2.4)) - 0.055) : 12.92 * c;
     });
 };
 /**
@@ -2062,7 +2096,7 @@ var rgb2rgbLinear = function (rgb) {
     return rgb.map(function (c) {
         var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
         // eslint-disable-next-line prettier/prettier
-        return abs <= 0.04045 ? c / 12.92 : sign * (Math.pow(((abs + 0.055) / 1.055), 2.4));
+        return abs <= 0.04045 ? c / 12.92 : sign * Math.pow(((abs + 0.055) / 1.055), 2.4);
     });
 };
 /**
@@ -2099,7 +2133,9 @@ var srgbLinearFromXYZ = function (args) {
 var p3LinearToXyz = function (p3l) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [0.4865709486482162, 0.26566769316909306, 0.1982172852343625, 0.2289745640697488, 0.6917385218365064, 0.079286914093745, 0.0, 0.04511338185890264, 1.043944368900976
+    [
+        0.4865709486482162, 0.26566769316909306, 0.1982172852343625, 0.2289745640697488, 0.6917385218365064,
+        0.079286914093745, 0.0, 0.04511338185890264, 1.043944368900976
     ], p3l);
 };
 /**
@@ -2110,7 +2146,10 @@ var p3LinearToXyz = function (p3l) {
 var xyzToP3Linear = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [2.493496911941425, -0.9313836179191239, -0.40271078445071684, -0.8294889695615747, 1.7626640603183463, 0.023624685841943577, 0.03584583024378447, -0.07617238926804182, 0.9568845240076872], xyz);
+    [
+        2.493496911941425, -0.9313836179191239, -0.40271078445071684, -0.8294889695615747, 1.7626640603183463,
+        0.023624685841943577, 0.03584583024378447, -0.07617238926804182, 0.9568845240076872
+    ], xyz);
 };
 /**
  * Convert P3 to P3 linear
@@ -2124,7 +2163,7 @@ var p32p3Linear = function (p3) {
             return c / 12.92;
         }
         // eslint-disable-next-line prettier/prettier
-        return sign * (Math.pow(((c + 0.055) / 1.055), 2.4)) || 0;
+        return sign * Math.pow(((c + 0.055) / 1.055), 2.4) || 0;
     });
 };
 /**
@@ -2174,7 +2213,10 @@ var convertP3 = function (args) {
 var xyz2a98Linear = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [2.0415879038107465, -0.5650069742788596, -0.34473135077832956, -0.9692436362808795, 1.8759675015077202, 0.04155505740717557, 0.013444280632031142, -0.11836239223101838, 1.0151749943912054], xyz);
+    [
+        2.0415879038107465, -0.5650069742788596, -0.34473135077832956, -0.9692436362808795, 1.8759675015077202,
+        0.04155505740717557, 0.013444280632031142, -0.11836239223101838, 1.0151749943912054
+    ], xyz);
 };
 /**
  * Convert XYZ to a98 linear
@@ -2184,7 +2226,10 @@ var xyz2a98Linear = function (xyz) {
 var a98Linear2xyz = function (a98) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [0.5766690429101305, 0.1855582379065463, 0.1882286462349947, 0.29734497525053605, 0.6273635662554661, 0.0752914584939978, 0.02703136138641234, 0.07068885253582723, 0.9913375368376388], a98);
+    [
+        0.5766690429101305, 0.1855582379065463, 0.1882286462349947, 0.29734497525053605, 0.6273635662554661,
+        0.0752914584939978, 0.02703136138641234, 0.07068885253582723, 0.9913375368376388
+    ], a98);
 };
 /**
  * Convert A98 RGB to rgb linear
@@ -2240,7 +2285,10 @@ var convertA98rgb = function (args) {
 var proPhotoLinearToXyz = function (p3) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [0.79776664490064230, 0.13518129740053308, 0.03134773412839220, 0.28807482881940130, 0.71183523424187300, 0.00008993693872564, 0.0, 0.0, 0.82510460251046020], p3);
+    [
+        0.7977666449006423, 0.13518129740053308, 0.0313477341283922, 0.2880748288194013, 0.711835234241873,
+        0.00008993693872564, 0.0, 0.0, 0.8251046025104602
+    ], p3);
 };
 /**
  * Convert XYZ D65 to linear-light display-p3
@@ -2250,7 +2298,10 @@ var proPhotoLinearToXyz = function (p3) {
 var xyzToProPhotoLinear = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [1.34578688164715830, -0.25557208737979464, -0.05110186497554526, -0.54463070512490190, 1.50824774284514680, 0.02052744743642139, 0.0, 0.0, 1.21196754563894520], xyz);
+    [
+        1.3457868816471583, -0.25557208737979464, -0.05110186497554526, -0.5446307051249019, 1.5082477428451468,
+        0.02052744743642139, 0.0, 0.0, 1.2119675456389452
+    ], xyz);
 };
 /**
  * Convert Pro-Photo to Pro-Photo Linear
@@ -2333,7 +2384,9 @@ var rec2020Linear2rec2020 = function (rgb) {
 var rec2020LinearToXyz = function (rec) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [0.6369580483012914, 0.14461690358620832, 0.1688809751641721, 0.2627002120112671, 0.6779980715188708, 0.05930171646986196, 0.0, 0.028072693049087428, 1.060985057710791
+    [
+        0.6369580483012914, 0.14461690358620832, 0.1688809751641721, 0.2627002120112671, 0.6779980715188708,
+        0.05930171646986196, 0.0, 0.028072693049087428, 1.060985057710791
     ], rec);
 };
 /**
@@ -2344,7 +2397,10 @@ var rec2020LinearToXyz = function (rec) {
 var xyzToRec2020Linear = function (xyz) {
     return multiplyMatrices(
     // eslint-disable-next-line prettier/prettier
-    [1.716651187971268, -0.355670783776392, -0.253366281373660, -0.666684351832489, 1.616481236634939, 0.0157685458139111, 0.017639857445311, -0.042770613257809, 0.942103121235474], xyz);
+    [
+        1.716651187971268, -0.355670783776392, -0.25336628137366, -0.666684351832489, 1.616481236634939,
+        0.0157685458139111, 0.017639857445311, -0.042770613257809, 0.942103121235474
+    ], xyz);
 };
 /**
  * Convert Rec2020 to XYZ
@@ -6050,11 +6106,17 @@ var DocumentCloner = /** @class */ (function () {
                 }
             });
         }); });
+        var adoptedNode = documentClone.adoptNode(this.documentElement);
+        /**
+         * The baseURI of the document will be lost after documentClone.open().
+         * We can avoid it by adding <base> element.
+         * */
+        addBase(adoptedNode, documentClone);
         documentClone.open();
         documentClone.write(serializeDoctype(document.doctype) + "<html></html>");
         // Chrome scrolls the parent document for some reason after the write to the cloned window???
         restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY);
-        documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement);
+        documentClone.replaceChild(adoptedNode, documentClone.documentElement);
         documentClone.close();
         return iframeLoad;
     };
@@ -6132,7 +6194,7 @@ var DocumentCloner = /** @class */ (function () {
             clonedCanvas.width = canvas.width;
             clonedCanvas.height = canvas.height;
             var ctx = canvas.getContext('2d');
-            var clonedCtx = clonedCanvas.getContext('2d');
+            var clonedCtx = clonedCanvas.getContext('2d', { willReadFrequently: true });
             if (clonedCtx) {
                 if (!this.options.allowTaint && ctx) {
                     clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
@@ -6462,6 +6524,13 @@ var createStyles = function (body, styles) {
         body.appendChild(style);
     }
 };
+var addBase = function (targetELement, referenceDocument) {
+    var _a;
+    var baseNode = referenceDocument.createElement('base');
+    baseNode.href = referenceDocument.baseURI;
+    var headEle = targetELement.getElementsByTagName('head').item(0);
+    headEle === null || headEle === void 0 ? void 0 : headEle.insertBefore(baseNode, (_a = headEle === null || headEle === void 0 ? void 0 : headEle.firstChild) !== null && _a !== void 0 ? _a : null);
+};
 
 var CacheStorage = /** @class */ (function () {
     function CacheStorage() {
@@ -7997,10 +8066,11 @@ var CanvasRenderer = /** @class */ (function (_super) {
         this.ctx.translate(-offsetX, -offsetY);
     };
     CanvasRenderer.prototype.resizeImage = function (image, width, height) {
+        // https://github.com/niklasvh/html2canvas/pull/2911
+        // if (image.width === width && image.height === height) {
+        //     return image;
+        // }
         var _a;
-        if (image.width === width && image.height === height) {
-            return image;
-        }
         var ownerDocument = (_a = this.canvas.ownerDocument) !== null && _a !== void 0 ? _a : document;
         var canvas = ownerDocument.createElement('canvas');
         canvas.width = Math.max(1, width);