watermark-js-plus 1.5.8 → 1.6.0

package/dist/index.esm.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.
  */
@@ -30,7 +30,7 @@ function styleInject(css, ref) {
   }
 }
 
-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);
 
 /******************************************************************************
@@ -47,7 +47,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 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 ||
@@ -86,8 +86,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 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.");
@@ -111,7 +111,12 @@ function __generator(thisArg, body) {
         } 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);
@@ -162,7 +167,7 @@ var createCustomContentSVG = function (ctx, options) { return __awaiter(void 0,
         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');
@@ -184,14 +189,14 @@ var createCustomContentSVG = function (ctx, options) { return __awaiter(void 0,
                 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,
                     }];
         }
     });
@@ -259,7 +264,8 @@ function convertImgToBase64(bodyElement) {
 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);
 };
@@ -275,7 +281,7 @@ var loadImage = function (url, width, height) {
     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;
@@ -288,6 +294,25 @@ var loadImage = function (url, width, height) {
 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,
@@ -323,7 +348,7 @@ var initialOptions = {
     onSuccess: function () { },
     onBeforeDestroy: function () { },
     onDestroyed: function () { },
-    onObserveError: function () { }
+    onObserveError: function () { },
 };
 var generateRecommendOptions = function (canvas, options, args) {
     var ctx = canvas.getContext('2d');
@@ -336,7 +361,7 @@ var generateRecommendOptions = function (canvas, options, args) {
     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;
@@ -345,21 +370,21 @@ var generateRecommendOptions = function (canvas, options, args) {
         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,
@@ -367,15 +392,15 @@ var generateRecommendOptions = function (canvas, options, args) {
                 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':
@@ -425,14 +450,14 @@ var generateRecommendOptions = function (canvas, options, args) {
             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;
@@ -442,13 +467,13 @@ var generateRecommendOptions = function (canvas, options, args) {
             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;
@@ -458,13 +483,13 @@ var generateRecommendOptions = function (canvas, options, args) {
             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;
@@ -474,13 +499,13 @@ var generateRecommendOptions = function (canvas, options, args) {
             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;
@@ -490,13 +515,13 @@ var generateRecommendOptions = function (canvas, options, args) {
             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;
@@ -506,13 +531,13 @@ var generateRecommendOptions = function (canvas, options, args) {
             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;
@@ -554,12 +579,13 @@ var generateRecommendOptions = function (canvas, options, args) {
     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':
@@ -577,11 +603,11 @@ var protection = (function (need) {
     if (need) {
         Object.defineProperty(window, 'MutationObserver', {
             writable: false,
-            configurable: false
+            configurable: false,
         });
         Object.defineProperty(window, 'requestAnimationFrame', {
             writable: false,
-            configurable: false
+            configurable: false,
         });
     }
 });
@@ -710,7 +736,7 @@ var WatermarkCanvas = /** @class */ (function () {
     };
     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);
         });
@@ -718,7 +744,7 @@ var WatermarkCanvas = /** @class */ (function () {
     };
     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);
         });
@@ -726,7 +752,7 @@ var WatermarkCanvas = /** @class */ (function () {
     };
     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);
         });
@@ -734,7 +760,7 @@ var WatermarkCanvas = /** @class */ (function () {
     };
     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';
@@ -748,7 +774,7 @@ var WatermarkCanvas = /** @class */ (function () {
             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);
     };
@@ -782,7 +808,12 @@ var WatermarkCanvas = /** @class */ (function () {
         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);
     };
@@ -809,10 +840,10 @@ var WatermarkCanvas = /** @class */ (function () {
         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;
@@ -825,7 +856,7 @@ var WatermarkCanvas = /** @class */ (function () {
         var _a, _b;
         var result = {
             x: -imageWidth / 2,
-            y: -imageHeight / 2
+            y: -imageHeight / 2,
         };
         switch (this.options.translatePlacement) {
             case 'top':
@@ -882,7 +913,7 @@ var GridLayout = /** @class */ (function () {
     }
     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);
@@ -911,21 +942,14 @@ var renderLayout = function (options, partialCanvas) {
 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];
     }
 };
 
@@ -1010,14 +1034,14 @@ var Watermark = /** @class */ (function () {
                         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);
                             }
                         }
@@ -1149,7 +1173,7 @@ var Watermark = /** @class */ (function () {
             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;
@@ -1164,7 +1188,9 @@ var Watermark = /** @class */ (function () {
                         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:
@@ -1181,7 +1207,7 @@ var Watermark = /** @class */ (function () {
             attributes: true, // 属性的变动
             childList: true, // 子节点的变动（指新增，删除或者更改）
             subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
-            characterData: true // 节点内容或节点文本的变动。
+            characterData: true, // 节点内容或节点文本的变动。
         });
     };
     Watermark.prototype.bindCheckWatermarkElementEvent = function () {
@@ -1209,7 +1235,7 @@ var BlindWatermark = /** @class */ (function (_super) {
         if (props === void 0) { props = {}; }
         var defaultProps = {
             globalAlpha: 0.005,
-            mode: 'blind'
+            mode: 'blind',
         };
         return _super.call(this, __assign(__assign({}, props), defaultProps)) || this;
     }
@@ -1281,12 +1307,15 @@ var ImageWatermark = /** @class */ (function () {
      */
     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 () {