watermark-js-plus 1.5.8 → 1.6.0

package/dist/ie/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.
  */
@@ -557,10 +557,10 @@ var WatermarkPlus = (function (exports) {
 		var store = sharedStore.exports = globalThis[SHARED] || defineGlobalProperty(SHARED, {});
 
 		(store.versions || (store.versions = [])).push({
-		  version: '3.40.0',
+		  version: '3.41.0',
 		  mode: IS_PURE ? 'pure' : 'global',
 		  copyright: '© 2014-2025 Denis Pushkarev (zloirock.ru)',
-		  license: 'https://github.com/zloirock/core-js/blob/v3.40.0/LICENSE',
+		  license: 'https://github.com/zloirock/core-js/blob/v3.41.0/LICENSE',
 		  source: 'https://github.com/zloirock/core-js'
 		});
 		return sharedStore.exports;
@@ -4216,7 +4216,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);
 
 	/******************************************************************************
@@ -4233,7 +4233,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 ||
@@ -4272,8 +4272,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.");
@@ -4297,7 +4297,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);
@@ -4348,7 +4353,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');
@@ -4370,14 +4375,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,
 	                    }];
 	        }
 	    });
@@ -4445,7 +4450,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);
 	};
@@ -4461,7 +4467,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;
@@ -4474,6 +4480,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,
@@ -4509,7 +4534,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');
@@ -4522,7 +4547,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;
@@ -4531,21 +4556,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,
@@ -4553,15 +4578,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':
@@ -4611,14 +4636,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;
@@ -4628,13 +4653,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;
@@ -4644,13 +4669,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;
@@ -4660,13 +4685,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;
@@ -4676,13 +4701,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;
@@ -4692,13 +4717,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;
@@ -4740,12 +4765,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':
@@ -4763,11 +4789,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,
 	        });
 	    }
 	});
@@ -4896,7 +4922,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);
 	        });
@@ -4904,7 +4930,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);
 	        });
@@ -4912,7 +4938,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);
 	        });
@@ -4920,7 +4946,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';
@@ -4934,7 +4960,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);
 	    };
@@ -4968,7 +4994,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);
 	    };
@@ -4995,10 +5026,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;
@@ -5011,7 +5042,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':
@@ -5068,7 +5099,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);
@@ -5097,21 +5128,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];
 	    }
 	};
 
@@ -5196,14 +5220,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);
 	                            }
 	                        }
@@ -5335,7 +5359,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;
@@ -5350,7 +5374,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:
@@ -5367,7 +5393,7 @@ var WatermarkPlus = (function (exports) {
 	            attributes: true, // 属性的变动
 	            childList: true, // 子节点的变动（指新增，删除或者更改）
 	            subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
-	            characterData: true // 节点内容或节点文本的变动。
+	            characterData: true, // 节点内容或节点文本的变动。
 	        });
 	    };
 	    Watermark.prototype.bindCheckWatermarkElementEvent = function () {
@@ -5395,7 +5421,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;
 	    }
@@ -5467,12 +5493,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 () {