watermark-js-plus 1.5.8 → 1.6.0

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * watermark-js-plus v1.5.8
+ * watermark-js-plus v1.6.0
  * (c) 2022-2024 Michael Sun
  * Released under the MIT License.
  */
@@ -33,7 +33,7 @@ var WatermarkPlus = (function (exports) {
     }
   }
 
-  var css_248z = "@keyframes watermark{0%{background-position:0 0}25%{background-position:100% 100%}50%{background-position:0 0}75%{background-position:100% -100%}to{background-position:0 0}}";
+  var css_248z = "@keyframes watermark{0%{background-position:0 0}25%{background-position:100% 100%}50%{background-position:100% 0}75%{background-position:0 100%}to{background-position:0 0}}@keyframes watermark-horizontal{0%{background-position-x:0}to{background-position-x:100%}}@keyframes watermark-vertical{0%{background-position-y:0}to{background-position-y:100%}}";
   styleInject(css_248z);
 
   /******************************************************************************
@@ -50,7 +50,7 @@ var WatermarkPlus = (function (exports) {
   OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
-  /* global Reflect, Promise */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
   var extendStatics = function(d, b) {
       extendStatics = Object.setPrototypeOf ||
@@ -89,8 +89,8 @@ var WatermarkPlus = (function (exports) {
   }
 
   function __generator(thisArg, body) {
-      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+      return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
       function verb(n) { return function (v) { return step([n, v]); }; }
       function step(op) {
           if (f) throw new TypeError("Generator is already executing.");
@@ -114,7 +114,12 @@ var WatermarkPlus = (function (exports) {
           } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
           if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
       }
-  }
+  }
+
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
 
   var convertImage = function (canvas) {
       return canvas.toDataURL('image/png', 1);
@@ -165,7 +170,7 @@ var WatermarkPlus = (function (exports) {
           switch (_b.label) {
               case 0:
                   svgElement = createSVGElement('svg', {
-                      xmlns: 'http://www.w3.org/2000/svg'
+                      xmlns: 'http://www.w3.org/2000/svg',
                   });
                   bodyElement = document.createElement('div');
                   bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
@@ -187,14 +192,14 @@ var WatermarkPlus = (function (exports) {
                   svgElement.setAttribute('height', height.toString());
                   foreignObjectElement = createSVGElement('foreignObject', {
                       width: width.toString(),
-                      height: height.toString()
+                      height: height.toString(),
                   });
                   foreignObjectElement.appendChild(bodyElement);
                   svgElement.appendChild(foreignObjectElement);
                   return [2 /*return*/, {
                           element: svgElement,
                           width: width,
-                          height: height
+                          height: height,
                       }];
           }
       });
@@ -262,7 +267,8 @@ var WatermarkPlus = (function (exports) {
   var convertSVGToImage = function (svg) {
       var richContent = svg.outerHTML
           .replace(/<(img|br|input|hr|embed)(.*?)>/g, '<$1$2/>')
-          .replace(/\n/g, '').replace(/\t/g, '')
+          .replace(/\n/g, '')
+          .replace(/\t/g, '')
           .replace(/#/g, '%23');
       return "data:image/svg+xml;charset=utf-8,".concat(richContent);
   };
@@ -278,7 +284,7 @@ var WatermarkPlus = (function (exports) {
       if (width === void 0) { width = undefined; }
       if (height === void 0) { height = undefined; }
       var image = new Image();
-      image.setAttribute('crossOrigin', 'Anonymous');
+      image.setAttribute('crossOrigin', 'anonymous');
       !isUndefined(width) && (image.width = width);
       !isUndefined(height) && (image.height = height);
       image.src = url;
@@ -291,6 +297,25 @@ var WatermarkPlus = (function (exports) {
   var generateMatrix = function (rows, columns, value) {
       return Array.from({ length: rows }, function () { return new Array(columns).fill(value); });
   };
+  var generateAnimationStyle = function (movable, backgroundRepeat) {
+      if (!movable) {
+          return '';
+      }
+      var horizontalDuration = Math.random() * (8 - 2) + 2;
+      var verticalDuration = Math.random() * (4 - 2) + 2;
+      switch (backgroundRepeat) {
+          case 'repeat':
+              return 'animation: 200s linear 0s infinite alternate watermark !important;';
+          case 'repeat-x':
+              return "animation: ".concat(horizontalDuration, "s ease-in 0s infinite alternate watermark-vertical !important;'");
+          case 'repeat-y':
+              return "animation: ".concat(verticalDuration, "s ease-out 0s infinite alternate watermark-horizontal !important;'");
+          case 'no-repeat':
+              return "animation: ".concat(horizontalDuration, "s ease-in 0s infinite alternate watermark-horizontal, ").concat(verticalDuration, "s ease-out 0s infinite alternate watermark-vertical !important;");
+          default:
+              return '';
+      }
+  };
 
   var initialOptions = {
       width: 300,
@@ -326,7 +351,7 @@ var WatermarkPlus = (function (exports) {
       onSuccess: function () { },
       onBeforeDestroy: function () { },
       onDestroyed: function () { },
-      onObserveError: function () { }
+      onObserveError: function () { },
   };
   var generateRecommendOptions = function (canvas, options, args) {
       var ctx = canvas.getContext('2d');
@@ -339,7 +364,7 @@ var WatermarkPlus = (function (exports) {
       ctx.letterSpacing = options.letterSpacing;
       ctx.wordSpacing = options.wordSpacing;
       if (options === null || options === void 0 ? void 0 : options.rotate) {
-          options.rotate = (360 - options.rotate % 360) * (Math.PI / 180);
+          options.rotate = (360 - (options.rotate % 360)) * (Math.PI / 180);
       }
       if (isUndefined(args.textRowMaxWidth)) {
           options.textRowMaxWidth = options.width;
@@ -348,21 +373,21 @@ var WatermarkPlus = (function (exports) {
           image: {
               rect: {
                   width: options.imageWidth,
-                  height: options.imageHeight
+                  height: options.imageHeight,
               },
               position: {
                   x: 0,
-                  y: 0
-              }
+                  y: 0,
+              },
           },
           textLine: {
               data: [],
-              yOffsetValue: 0
+              yOffsetValue: 0,
           },
           advancedStyleParams: {
               linear: {
                   x0: 0,
-                  x1: 0
+                  x1: 0,
               },
               radial: {
                   x0: 0,
@@ -370,15 +395,15 @@ var WatermarkPlus = (function (exports) {
                   r0: 0,
                   x1: 0,
                   y1: 0,
-                  r1: 0
+                  r1: 0,
               },
               conic: {
                   x: 0,
                   y: 0,
-                  startAngle: 0
+                  startAngle: 0,
               },
-              pattern: {}
-          }
+              pattern: {},
+          },
       };
       switch (options.contentType) {
           case 'text':
@@ -428,14 +453,14 @@ var WatermarkPlus = (function (exports) {
               result.advancedStyleParams.linear.x0 = -options.width / 2;
               result.advancedStyleParams.linear.x1 = options.width / 2;
               // result.advancedStyleParams.radial.x0 = 0
-              result.advancedStyleParams.radial.y0 = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y0 = (result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r0 = 0
               // result.advancedStyleParams.radial.x1 = 0
               // result.advancedStyleParams.radial.y1 = 0
-              result.advancedStyleParams.radial.y1 = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y1 = (result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r1 = options.width / 2
               // result.advancedStyleParams.conic.x = 0
-              result.advancedStyleParams.conic.y = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.conic.y = (result.textLine.data.length * options.lineHeight) / 2;
               break;
           case 'top-start':
               translateX = 0;
@@ -445,13 +470,13 @@ var WatermarkPlus = (function (exports) {
               result.advancedStyleParams.linear.x0 = 0;
               result.advancedStyleParams.linear.x1 = options.width;
               result.advancedStyleParams.radial.x0 = options.width / 2;
-              result.advancedStyleParams.radial.y0 = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y0 = (result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r0 = 0
               result.advancedStyleParams.radial.x1 = options.width / 2;
-              result.advancedStyleParams.radial.y1 = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y1 = (result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r1 = options.width / 2
               result.advancedStyleParams.conic.x = options.width / 2;
-              result.advancedStyleParams.conic.y = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.conic.y = (result.textLine.data.length * options.lineHeight) / 2;
               break;
           case 'top-end':
               translateX = options.width;
@@ -461,13 +486,13 @@ var WatermarkPlus = (function (exports) {
               result.advancedStyleParams.linear.x0 = 0;
               result.advancedStyleParams.linear.x1 = -options.width;
               result.advancedStyleParams.radial.x0 = -options.width / 2;
-              result.advancedStyleParams.radial.y0 = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y0 = (result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r0 = 0
               result.advancedStyleParams.radial.x1 = -options.width / 2;
-              result.advancedStyleParams.radial.y1 = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y1 = (result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r1 = options.width / 2
               result.advancedStyleParams.conic.x = -options.width / 2;
-              result.advancedStyleParams.conic.y = result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.conic.y = (result.textLine.data.length * options.lineHeight) / 2;
               break;
           case 'bottom':
               translateX = options.width / 2;
@@ -477,13 +502,13 @@ var WatermarkPlus = (function (exports) {
               result.advancedStyleParams.linear.x0 = -options.width / 2;
               result.advancedStyleParams.linear.x1 = options.width / 2;
               // result.advancedStyleParams.radial.x0 = 0
-              result.advancedStyleParams.radial.y0 = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y0 = (-result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r0 = 0
               // result.advancedStyleParams.radial.x1 = 0
-              result.advancedStyleParams.radial.y1 = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y1 = (-result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r1 = options.width / 2
               result.advancedStyleParams.conic.x = 0;
-              result.advancedStyleParams.conic.y = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.conic.y = (-result.textLine.data.length * options.lineHeight) / 2;
               break;
           case 'bottom-start':
               translateX = 0;
@@ -493,13 +518,13 @@ var WatermarkPlus = (function (exports) {
               result.advancedStyleParams.linear.x0 = 0;
               result.advancedStyleParams.linear.x1 = options.width;
               result.advancedStyleParams.radial.x0 = options.width / 2;
-              result.advancedStyleParams.radial.y0 = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y0 = (-result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r0 = 0
               result.advancedStyleParams.radial.x1 = options.width / 2;
-              result.advancedStyleParams.radial.y1 = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y1 = (-result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r1 = options.width / 2
               result.advancedStyleParams.conic.x = options.width / 2;
-              result.advancedStyleParams.conic.y = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.conic.y = (-result.textLine.data.length * options.lineHeight) / 2;
               break;
           case 'bottom-end':
               translateX = options.width;
@@ -509,13 +534,13 @@ var WatermarkPlus = (function (exports) {
               result.advancedStyleParams.linear.x0 = 0;
               result.advancedStyleParams.linear.x1 = -options.width;
               result.advancedStyleParams.radial.x0 = -options.width / 2;
-              result.advancedStyleParams.radial.y0 = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y0 = (-result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r0 = 0
               result.advancedStyleParams.radial.x1 = -options.width / 2;
-              result.advancedStyleParams.radial.y1 = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.radial.y1 = (-result.textLine.data.length * options.lineHeight) / 2;
               // result.advancedStyleParams.radial.r1 = options.width / 2
               result.advancedStyleParams.conic.x = -options.width / 2;
-              result.advancedStyleParams.conic.y = -result.textLine.data.length * options.lineHeight / 2;
+              result.advancedStyleParams.conic.y = (-result.textLine.data.length * options.lineHeight) / 2;
               break;
           case 'left':
               translateX = 0;
@@ -557,12 +582,13 @@ var WatermarkPlus = (function (exports) {
       if (['text', 'multi-line-text'].includes(options.contentType)) {
           switch (options.textBaseline) {
               case 'middle':
-                  result.textLine.yOffsetValue = (result.textLine.data.length - 1) * options.lineHeight / 2;
+                  result.textLine.yOffsetValue = ((result.textLine.data.length - 1) * options.lineHeight) / 2;
                   break;
               case 'bottom':
               case 'alphabetic':
               case 'ideographic':
-                  result.textLine.yOffsetValue = (result.textLine.data.length - 1) * options.lineHeight + (options.lineHeight - parseInt(options.fontSize)) / 2;
+                  result.textLine.yOffsetValue =
+                      (result.textLine.data.length - 1) * options.lineHeight + (options.lineHeight - parseInt(options.fontSize)) / 2;
                   break;
               case 'top':
               case 'hanging':
@@ -580,11 +606,11 @@ var WatermarkPlus = (function (exports) {
       if (need) {
           Object.defineProperty(window, 'MutationObserver', {
               writable: false,
-              configurable: false
+              configurable: false,
           });
           Object.defineProperty(window, 'requestAnimationFrame', {
               writable: false,
-              configurable: false
+              configurable: false,
           });
       }
   });
@@ -713,7 +739,7 @@ var WatermarkPlus = (function (exports) {
       };
       WatermarkCanvas.prototype.createLinearGradient = function (ctx) {
           var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-          var gradient = ctx.createLinearGradient(getValue((_c = (_b = (_a = this.options.advancedStyle) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.linear) === null || _c === void 0 ? void 0 : _c.x0, this.recommendOptions.advancedStyleParams.linear.x0), getValue((_f = (_e = (_d = this.options.advancedStyle) === null || _d === void 0 ? void 0 : _d.params) === null || _e === void 0 ? void 0 : _e.linear) === null || _f === void 0 ? void 0 : _f.y0, 0), getValue((_j = (_h = (_g = this.options.advancedStyle) === null || _g === void 0 ? void 0 : _g.params) === null || _h === void 0 ? void 0 : _h.linear) === null || _j === void 0 ? void 0 : _j.x1, this.recommendOptions.advancedStyleParams.linear.x1), getValue((_m = (_l = (_k = this.options.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.linear) === null || _m === void 0 ? void 0 : _m.y1, 0));
+          var gradient = ctx.createLinearGradient((getValue((_c = (_b = (_a = this.options.advancedStyle) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.linear) === null || _c === void 0 ? void 0 : _c.x0, this.recommendOptions.advancedStyleParams.linear.x0)), getValue((_f = (_e = (_d = this.options.advancedStyle) === null || _d === void 0 ? void 0 : _d.params) === null || _e === void 0 ? void 0 : _e.linear) === null || _f === void 0 ? void 0 : _f.y0, 0), (getValue((_j = (_h = (_g = this.options.advancedStyle) === null || _g === void 0 ? void 0 : _g.params) === null || _h === void 0 ? void 0 : _h.linear) === null || _j === void 0 ? void 0 : _j.x1, this.recommendOptions.advancedStyleParams.linear.x1)), getValue((_m = (_l = (_k = this.options.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.linear) === null || _m === void 0 ? void 0 : _m.y1, 0));
           (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
               gradient.addColorStop(item.offset, item.color);
           });
@@ -721,7 +747,7 @@ var WatermarkPlus = (function (exports) {
       };
       WatermarkCanvas.prototype.createConicGradient = function (ctx) {
           var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-          var gradient = ctx.createConicGradient(getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.conic) === null || _d === void 0 ? void 0 : _d.startAngle, 0), getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.conic) === null || _h === void 0 ? void 0 : _h.x, this.recommendOptions.advancedStyleParams.conic.x), getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.conic) === null || _m === void 0 ? void 0 : _m.y, this.recommendOptions.advancedStyleParams.conic.y));
+          var gradient = ctx.createConicGradient(getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.conic) === null || _d === void 0 ? void 0 : _d.startAngle, 0), (getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.conic) === null || _h === void 0 ? void 0 : _h.x, this.recommendOptions.advancedStyleParams.conic.x)), (getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.conic) === null || _m === void 0 ? void 0 : _m.y, this.recommendOptions.advancedStyleParams.conic.y)));
           (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
               gradient.addColorStop(item.offset, item.color);
           });
@@ -729,7 +755,7 @@ var WatermarkPlus = (function (exports) {
       };
       WatermarkCanvas.prototype.createRadialGradient = function (ctx) {
           var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
-          var gradient = ctx.createRadialGradient(getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.radial) === null || _d === void 0 ? void 0 : _d.x0, this.recommendOptions.advancedStyleParams.radial.x0), getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.radial) === null || _h === void 0 ? void 0 : _h.y0, this.recommendOptions.advancedStyleParams.radial.y0), getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.radial) === null || _m === void 0 ? void 0 : _m.r0, this.recommendOptions.advancedStyleParams.radial.r0), getValue((_r = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.params) === null || _q === void 0 ? void 0 : _q.radial) === null || _r === void 0 ? void 0 : _r.x1, this.recommendOptions.advancedStyleParams.radial.x1), getValue((_v = (_u = (_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.advancedStyle) === null || _t === void 0 ? void 0 : _t.params) === null || _u === void 0 ? void 0 : _u.radial) === null || _v === void 0 ? void 0 : _v.y1, this.recommendOptions.advancedStyleParams.radial.y1), getValue((_z = (_y = (_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.advancedStyle) === null || _x === void 0 ? void 0 : _x.params) === null || _y === void 0 ? void 0 : _y.radial) === null || _z === void 0 ? void 0 : _z.r1, this.recommendOptions.advancedStyleParams.radial.r1));
+          var gradient = ctx.createRadialGradient((getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.radial) === null || _d === void 0 ? void 0 : _d.x0, this.recommendOptions.advancedStyleParams.radial.x0)), (getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.radial) === null || _h === void 0 ? void 0 : _h.y0, this.recommendOptions.advancedStyleParams.radial.y0)), (getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.radial) === null || _m === void 0 ? void 0 : _m.r0, this.recommendOptions.advancedStyleParams.radial.r0)), (getValue((_r = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.params) === null || _q === void 0 ? void 0 : _q.radial) === null || _r === void 0 ? void 0 : _r.x1, this.recommendOptions.advancedStyleParams.radial.x1)), (getValue((_v = (_u = (_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.advancedStyle) === null || _t === void 0 ? void 0 : _t.params) === null || _u === void 0 ? void 0 : _u.radial) === null || _v === void 0 ? void 0 : _v.y1, this.recommendOptions.advancedStyleParams.radial.y1)), (getValue((_z = (_y = (_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.advancedStyle) === null || _x === void 0 ? void 0 : _x.params) === null || _y === void 0 ? void 0 : _y.radial) === null || _z === void 0 ? void 0 : _z.r1, this.recommendOptions.advancedStyleParams.radial.r1)));
           (_2 = (_1 = (_0 = this.options) === null || _0 === void 0 ? void 0 : _0.advancedStyle) === null || _1 === void 0 ? void 0 : _1.colorStops) === null || _2 === void 0 ? void 0 : _2.forEach(function (item) {
               gradient.addColorStop(item.offset, item.color);
           });
@@ -737,7 +763,7 @@ var WatermarkPlus = (function (exports) {
       };
       WatermarkCanvas.prototype.createPattern = function (ctx) {
           var _a, _b, _c, _d, _e, _f, _g, _h;
-          return ctx.createPattern((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.pattern) === null || _d === void 0 ? void 0 : _d.image, ((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.pattern) === null || _h === void 0 ? void 0 : _h.repetition) || '');
+          return ctx.createPattern(((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.pattern) === null || _d === void 0 ? void 0 : _d.image), ((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.pattern) === null || _h === void 0 ? void 0 : _h.repetition) || '');
       };
       WatermarkCanvas.prototype.setText = function (ctx, params) {
           var methodName = 'fillText';
@@ -751,7 +777,7 @@ var WatermarkPlus = (function (exports) {
               text: this.options.content,
               x: 0,
               y: 0 - this.recommendOptions.textLine.yOffsetValue,
-              maxWidth: this.options.textRowMaxWidth || this.options.width
+              maxWidth: this.options.textRowMaxWidth || this.options.width,
           });
           resolve(ctx.canvas);
       };
@@ -785,7 +811,12 @@ var WatermarkPlus = (function (exports) {
           var lines = this.recommendOptions.textLine.data;
           var yOffsetValue = this.recommendOptions.textLine.yOffsetValue;
           lines.forEach(function (text, index) {
-              _this.setText(ctx, { text: text, x: 0, y: _this.options.lineHeight * index - yOffsetValue, maxWidth: _this.options.textRowMaxWidth || _this.options.width });
+              _this.setText(ctx, {
+                  text: text,
+                  x: 0,
+                  y: _this.options.lineHeight * index - yOffsetValue,
+                  maxWidth: _this.options.textRowMaxWidth || _this.options.width,
+              });
           });
           resolve(ctx.canvas);
       };
@@ -812,10 +843,10 @@ var WatermarkPlus = (function (exports) {
           var rect = { width: this.options.imageWidth || 0, height: this.options.imageHeight || 0 };
           switch (true) {
               case rect.width !== 0 && rect.height === 0:
-                  rect.height = rect.width * image.height / image.width;
+                  rect.height = (rect.width * image.height) / image.width;
                   break;
               case rect.width === 0 && rect.height !== 0:
-                  rect.width = rect.height * image.width / image.height;
+                  rect.width = (rect.height * image.width) / image.height;
                   break;
               case rect.width === 0 && rect.height === 0:
                   rect.width = image.width;
@@ -828,7 +859,7 @@ var WatermarkPlus = (function (exports) {
           var _a, _b;
           var result = {
               x: -imageWidth / 2,
-              y: -imageHeight / 2
+              y: -imageHeight / 2,
           };
           switch (this.options.translatePlacement) {
               case 'top':
@@ -885,7 +916,7 @@ var WatermarkPlus = (function (exports) {
       }
       GridLayout.prototype.draw = function () {
           var _a, _b, _c, _d, _e, _f, _g, _h;
-          var layoutCanvas = WatermarkCanvas.createCanvas(((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.width) || (this.partialWidth * this.cols + this.gap[0] * this.cols), ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.height) || (this.partialHeight * this.rows + this.gap[1] * this.rows));
+          var layoutCanvas = WatermarkCanvas.createCanvas(((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.width) || this.partialWidth * this.cols + this.gap[0] * this.cols, ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.height) || this.partialHeight * this.rows + this.gap[1] * this.rows);
           var layoutContext = layoutCanvas.getContext('2d');
           if ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.backgroundImage) {
               layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.backgroundImage, 0, 0, (_e = this.options.gridLayoutOptions) === null || _e === void 0 ? void 0 : _e.width, (_f = this.options.gridLayoutOptions) === null || _f === void 0 ? void 0 : _f.height);
@@ -914,21 +945,14 @@ var WatermarkPlus = (function (exports) {
   var generateBackgroundSize = function (options) {
       var _a, _b, _c;
       switch (options.layout) {
-          case 'grid':
-              {
-                  var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
-                  var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
-                  var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
-                  return [
-                      options.width * cols + gap[0] * cols,
-                      options.height * rows + gap[1] * rows
-                  ];
-              }
+          case 'grid': {
+              var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
+              var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
+              var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
+              return [options.width * cols + gap[0] * cols, options.height * rows + gap[1] * rows];
+          }
           default:
-              return [
-                  options.width,
-                  options.height
-              ];
+              return [options.width, options.height];
       }
   };
 
@@ -1013,14 +1037,14 @@ var WatermarkPlus = (function (exports) {
                           parentElementType = this.checkParentElementType();
                           this.watermarkDom.style.cssText = "\n      z-index:".concat(this.options.zIndex, "!important;display:block!important;visibility:visible!important;transform:none!important;scale:none!important;\n      ").concat(parentElementType === 'custom' ? 'top:0!important;bottom:0!important;left:0!important;right:0!important;height:100%!important;pointer-events:none!important;position:absolute!important;' : 'position:relative!important;', "\n    ");
                           backgroundSize = generateBackgroundSize(this.options);
-                          watermarkInnerDom.style.cssText = "\n      display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n      position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n      z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n      background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, ";\n      ").concat(this.options.movable ? 'animation: 200s ease 0s infinite normal none running watermark !important;' : '', "\n    ");
+                          watermarkInnerDom.style.cssText = "\n      display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n      position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n      z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n      background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, ";\n      ").concat(generateAnimationStyle(this.options.movable, this.options.backgroundRepeat), "\n    ");
                           this.watermarkDom.appendChild(watermarkInnerDom);
                           this.parentElement.appendChild(this.watermarkDom);
                           if (this.options.mutationObserve) {
                               try {
                                   this.bindMutationObserve();
                               }
-                              catch (e) {
+                              catch (_j) {
                                   (_e = (_d = this.options).onObserveError) === null || _e === void 0 ? void 0 : _e.call(_d);
                               }
                           }
@@ -1152,7 +1176,7 @@ var WatermarkPlus = (function (exports) {
               attributes: true, // 属性的变动
               childList: true, // 子节点的变动（指新增，删除或者更改）
               subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
-              characterData: true // 节点内容或节点文本的变动。
+              characterData: true, // 节点内容或节点文本的变动。
           });
           this.parentObserve = new MutationObserver(function (mutationsList) { return __awaiter(_this, void 0, void 0, function () {
               var _i, mutationsList_1, item;
@@ -1167,7 +1191,9 @@ var WatermarkPlus = (function (exports) {
                           item = mutationsList_1[_i];
                           if (!((item === null || item === void 0 ? void 0 : item.target) === this.watermarkDom ||
                               ((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === this.watermarkDom ||
-                              (item.type === 'childList' && item.target === this.parentElement && item.target.lastChild !== this.watermarkDom))) return [3 /*break*/, 3];
+                              (item.type === 'childList' &&
+                                  item.target === this.parentElement &&
+                                  item.target.lastChild !== this.watermarkDom))) return [3 /*break*/, 3];
                           this.remove();
                           return [4 /*yield*/, this.create()];
                       case 2:
@@ -1184,7 +1210,7 @@ var WatermarkPlus = (function (exports) {
               attributes: true, // 属性的变动
               childList: true, // 子节点的变动（指新增，删除或者更改）
               subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
-              characterData: true // 节点内容或节点文本的变动。
+              characterData: true, // 节点内容或节点文本的变动。
           });
       };
       Watermark.prototype.bindCheckWatermarkElementEvent = function () {
@@ -1212,7 +1238,7 @@ var WatermarkPlus = (function (exports) {
           if (props === void 0) { props = {}; }
           var defaultProps = {
               globalAlpha: 0.005,
-              mode: 'blind'
+              mode: 'blind',
           };
           return _super.call(this, __assign(__assign({}, props), defaultProps)) || this;
       }
@@ -1284,12 +1310,15 @@ var WatermarkPlus = (function (exports) {
        */
       function ImageWatermark(args) {
           if (args === void 0) { args = {}; }
-          var _a;
+          var _a, _b;
           this.drew = false;
           this.props = args;
           this.options = __assign(__assign({}, initialOptions), args);
+          if (this.props.crossOrigin) {
+              (_a = this.props.dom) === null || _a === void 0 ? void 0 : _a.setAttribute('crossOrigin', 'anonymous');
+          }
           this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
-          this.originalSrc = (_a = this.props.dom) === null || _a === void 0 ? void 0 : _a.src;
+          this.originalSrc = (_b = this.props.dom) === null || _b === void 0 ? void 0 : _b.src;
           this.backgroundImage = this.getBackgroundImage();
       }
       ImageWatermark.prototype.create = function () {