watermark-js-plus 0.9.11 → 0.9.13

package/dist/index.umd.js

@@ -448,12 +448,13 @@
         }
     });
 
-    // import { WatermarkOptions } from '../types'
     var WatermarkCanvas = /** @class */ (function () {
-        function WatermarkCanvas() {
+        function WatermarkCanvas(args, options) {
+            this.props = args;
+            this.options = options;
+            this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
+            this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
         }
-        // constructor (args: Partial<WatermarkOptions> = {}) {
-        // }
         /**
          * Create an HD canvas.
          * @param width - width of canvas
@@ -470,224 +471,25 @@
             (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
             return canvas;
         };
-        return WatermarkCanvas;
-    }());
-
-    var GridLayout = /** @class */ (function () {
-        function GridLayout(args, partialCanvas) {
-            var _a, _b, _c, _d;
-            this.options = args;
-            this.partialWidth = this.options.width;
-            this.partialHeight = this.options.height;
-            this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
-            this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
-            this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
-            this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
-            this.partialCanvas = partialCanvas;
-        }
-        GridLayout.prototype.draw = function () {
-            var _a, _b;
-            var layoutCanvas = WatermarkCanvas.createCanvas(this.partialWidth * this.cols + this.gap[0] * this.cols, this.partialHeight * this.rows + this.gap[1] * this.rows);
-            var layoutContext = layoutCanvas.getContext('2d');
-            for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
-                for (var colIndex = 0; colIndex < this.cols; colIndex++) {
-                    if (!((_b = (_a = this.matrix) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b[colIndex])) {
-                        continue;
-                    }
-                    layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage(this.partialCanvas, this.partialWidth * colIndex + this.gap[0] * colIndex, this.partialHeight * rowIndex + this.gap[1] * rowIndex, this.partialWidth, this.partialHeight);
-                }
-            }
-            return layoutCanvas;
-        };
-        return GridLayout;
-    }());
-
-    var renderLayout = function (options, partialCanvas) {
-        switch (options.layout) {
-            case 'grid':
-                return new GridLayout(options, partialCanvas).draw();
-            default:
-                return 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
-                    ];
-                }
-            default:
-                return [
-                    options.width,
-                    options.height
-                ];
-        }
-    };
-
-    /**
-     * Watermark class
-     */
-    var Watermark = /** @class */ (function () {
-        /**
-         * Watermark constructor
-         * @param args - watermark args
-         */
-        function Watermark(args) {
-            if (args === void 0) { args = {}; }
-            this.parentElement = document.body;
-            this.props = args;
-            this.options = Object.assign({}, initialOptions, args);
-            this.changeParentElement(this.options.parent);
-            this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
-            this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
-            bootstrap();
-        }
-        Watermark.prototype.changeOptions = function (args, mode) {
-            if (args === void 0) { args = {}; }
-            if (mode === void 0) { mode = 'overwrite'; }
-            this.initConfigData(args, mode);
-        };
         /**
-         * Creating a watermark.
+         * Clean the canvas
+         * @param canvas
          */
-        Watermark.prototype.create = function () {
-            var _a, _b, _c, _d;
-            return __awaiter(this, void 0, void 0, function () {
-                var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0:
-                            if (!this.validateUnique()) {
-                                return [2 /*return*/];
-                            }
-                            if (!this.validateContent()) {
-                                return [2 /*return*/];
-                            }
-                            firstDraw = isUndefined(this.watermarkDom);
-                            return [4 /*yield*/, this.draw()];
-                        case 1:
-                            _e.sent();
-                            this.layoutCanvas = renderLayout(this.options, this.canvas);
-                            image = convertImage(this.layoutCanvas);
-                            this.clearCanvas();
-                            this.watermarkDom = document.createElement('div');
-                            watermarkInnerDom = document.createElement('div');
-                            this.watermarkDom.__WATERMARK__ = 'watermark';
-                            this.watermarkDom.__WATERMARK__INSTANCE__ = this;
-                            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, "!important;\n    ");
-                            this.watermarkDom.append(watermarkInnerDom);
-                            this.parentElement.appendChild(this.watermarkDom);
-                            if (this.options.mutationObserve) {
-                                try {
-                                    this.bindMutationObserve();
-                                }
-                                catch (e) {
-                                    (_b = (_a = this.options).onObserveError) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                }
-                            }
-                            firstDraw && ((_d = (_c = this.options).onSuccess) === null || _d === void 0 ? void 0 : _d.call(_c));
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        /**
-         * Delete this watermark.
-         */
-        Watermark.prototype.destroy = function () {
-            this.remove();
-            this.watermarkDom = undefined;
-        };
-        Watermark.prototype.check = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
-                            this.remove();
-                            return [4 /*yield*/, this.create()];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Watermark.prototype.remove = function () {
-            var _a, _b, _c, _d, _e, _f, _g;
-            (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
-            (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
-            (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
-            if (!isUndefined(this.checkWatermarkElementRequestID)) {
-                cancelAnimationFrame(this.checkWatermarkElementRequestID);
-            }
-            (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
-            (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
-        };
-        Watermark.prototype.initConfigData = function (args, mode) {
-            var _this = this;
-            if (mode === void 0) { mode = 'overwrite'; }
-            this.props = args;
-            if (mode === 'overwrite') {
-                this.options = Object.assign({}, initialOptions, args);
-            }
-            else {
-                Object.keys(args).forEach(function (key) {
-                    _this.options[key] = args[key];
-                });
-            }
-            this.changeParentElement(this.options.parent);
-            this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
-            this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
-            // document.body?.appendChild(this.canvas)
-        };
-        Watermark.prototype.changeParentElement = function (parent) {
-            if (typeof parent === 'string') {
-                var parentElement = document.querySelector(parent);
-                parentElement && (this.parentElement = parentElement);
-            }
-            else {
-                this.parentElement = parent;
+        WatermarkCanvas.clearCanvas = function (canvas) {
+            var ctx = canvas.getContext('2d');
+            if (ctx === null) {
+                throw new Error('get context error');
             }
+            ctx.restore();
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
         };
-        Watermark.prototype.validateUnique = function () {
-            var result = true;
-            if (this.options.unique) {
-                this.parentElement.childNodes.forEach(function (node) {
-                    if (!result) {
-                        return;
-                    }
-                    if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
-                        result = false;
-                        // throw new Error('duplicate watermark error')
-                    }
-                });
-            }
-            return result;
+        WatermarkCanvas.prototype.getCanvas = function () {
+            return this.canvas;
         };
-        Watermark.prototype.validateContent = function () {
-            switch (this.options.contentType) {
-                case 'image':
-                    return Object.hasOwnProperty.call(this.options, 'image');
-                case 'multi-line-text':
-                case 'rich-text':
-                case 'text':
-                    return this.options.content.length > 0;
-            }
-            return false;
+        WatermarkCanvas.prototype.clear = function () {
+            WatermarkCanvas.clearCanvas(this.canvas);
         };
-        Watermark.prototype.draw = function () {
+        WatermarkCanvas.prototype.draw = function () {
             var _this = this;
             var ctx = this.canvas.getContext('2d');
             if (ctx === null) {
@@ -728,7 +530,7 @@
                 }
             });
         };
-        Watermark.prototype.setStyle = function (ctx) {
+        WatermarkCanvas.prototype.setStyle = function (ctx) {
             var _a;
             var propName = 'fillStyle';
             if (this.options.textType === 'stroke') {
@@ -765,7 +567,7 @@
                 this.options.extraDrawFunc(ctx);
             }
         };
-        Watermark.prototype.createLinearGradient = function (ctx) {
+        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));
             (_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) {
@@ -773,7 +575,7 @@
             });
             return gradient;
         };
-        Watermark.prototype.createConicGradient = function (ctx) {
+        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));
             (_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) {
@@ -781,7 +583,7 @@
             });
             return gradient;
         };
-        Watermark.prototype.createRadialGradient = function (ctx) {
+        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));
             (_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) {
@@ -789,18 +591,18 @@
             });
             return gradient;
         };
-        Watermark.prototype.createPattern = function (ctx) {
+        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) || '');
         };
-        Watermark.prototype.setText = function (ctx, params) {
+        WatermarkCanvas.prototype.setText = function (ctx, params) {
             var methodName = 'fillText';
             if (this.options.textType === 'stroke') {
                 methodName = 'strokeText';
             }
             ctx[methodName] && ctx[methodName](params.text, params.x, params.y, params.maxWidth);
         };
-        Watermark.prototype.drawText = function (ctx, resolve) {
+        WatermarkCanvas.prototype.drawText = function (ctx, resolve) {
             this.setText(ctx, {
                 text: this.options.content,
                 x: 0,
@@ -809,7 +611,7 @@
             });
             resolve(ctx.canvas);
         };
-        Watermark.prototype.drawImage = function (ctx, resolve) {
+        WatermarkCanvas.prototype.drawImage = function (ctx, resolve) {
             var _this = this;
             loadImage(this.options.image).then(function (image) {
                 var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
@@ -818,7 +620,7 @@
                 resolve(ctx.canvas);
             });
         };
-        Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
+        WatermarkCanvas.prototype.drawMultiLineText = function (ctx, resolve) {
             var _this = this;
             // image.width = this.options.width
             // image.height = this.options.height
@@ -843,7 +645,7 @@
             });
             resolve(ctx.canvas);
         };
-        Watermark.prototype.drawRichText = function (ctx, resolve) {
+        WatermarkCanvas.prototype.drawRichText = function (ctx, resolve) {
             var _this = this;
             var obj = createCustomContentSVG(ctx, this.options);
             loadImage(convertSVGToImage(obj.element), obj.width, obj.height).then(function (image) {
@@ -852,7 +654,7 @@
                 resolve(ctx.canvas);
             });
         };
-        Watermark.prototype.getImageRect = function (image) {
+        WatermarkCanvas.prototype.getImageRect = function (image) {
             var rect = { width: this.options.imageWidth || 0, height: this.options.imageHeight || 0 };
             switch (true) {
                 case rect.width !== 0 && rect.height === 0:
@@ -868,7 +670,7 @@
             }
             return rect;
         };
-        Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
+        WatermarkCanvas.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
             var _a, _b;
             var result = {
                 x: -imageWidth / 2,
@@ -912,6 +714,220 @@
             !isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
             return result;
         };
+        return WatermarkCanvas;
+    }());
+
+    var GridLayout = /** @class */ (function () {
+        function GridLayout(args, partialCanvas) {
+            var _a, _b, _c, _d;
+            this.options = args;
+            this.partialWidth = this.options.width;
+            this.partialHeight = this.options.height;
+            this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
+            this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
+            this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
+            this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
+            this.partialCanvas = partialCanvas;
+        }
+        GridLayout.prototype.draw = function () {
+            var _a, _b;
+            var layoutCanvas = WatermarkCanvas.createCanvas(this.partialWidth * this.cols + this.gap[0] * this.cols, this.partialHeight * this.rows + this.gap[1] * this.rows);
+            var layoutContext = layoutCanvas.getContext('2d');
+            for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
+                for (var colIndex = 0; colIndex < this.cols; colIndex++) {
+                    if (!((_b = (_a = this.matrix) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b[colIndex])) {
+                        continue;
+                    }
+                    layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage(this.partialCanvas, this.partialWidth * colIndex + this.gap[0] * colIndex, this.partialHeight * rowIndex + this.gap[1] * rowIndex, this.partialWidth, this.partialHeight);
+                }
+            }
+            return layoutCanvas;
+        };
+        return GridLayout;
+    }());
+
+    var renderLayout = function (options, partialCanvas) {
+        switch (options.layout) {
+            case 'grid':
+                return new GridLayout(options, partialCanvas).draw();
+            default:
+                return 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
+                    ];
+                }
+            default:
+                return [
+                    options.width,
+                    options.height
+                ];
+        }
+    };
+
+    /**
+     * Watermark class
+     */
+    var Watermark = /** @class */ (function () {
+        /**
+         * Watermark constructor
+         * @param args - watermark args
+         */
+        function Watermark(args) {
+            if (args === void 0) { args = {}; }
+            this.parentElement = document.body;
+            this.props = args;
+            this.options = Object.assign({}, initialOptions, args);
+            this.changeParentElement(this.options.parent);
+            this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
+            bootstrap();
+        }
+        Watermark.prototype.changeOptions = function (args, mode) {
+            if (args === void 0) { args = {}; }
+            if (mode === void 0) { mode = 'overwrite'; }
+            this.initConfigData(args, mode);
+        };
+        /**
+         * Creating a watermark.
+         */
+        Watermark.prototype.create = function () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return __awaiter(this, void 0, void 0, function () {
+                var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
+                        case 0:
+                            if (!this.validateUnique()) {
+                                return [2 /*return*/];
+                            }
+                            if (!this.validateContent()) {
+                                return [2 /*return*/];
+                            }
+                            firstDraw = isUndefined(this.watermarkDom);
+                            return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
+                        case 1:
+                            _h.sent();
+                            this.layoutCanvas = renderLayout(this.options, (_b = this.watermarkCanvas) === null || _b === void 0 ? void 0 : _b.getCanvas());
+                            image = convertImage(this.layoutCanvas);
+                            (_c = this.watermarkCanvas) === null || _c === void 0 ? void 0 : _c.clear();
+                            this.watermarkDom = document.createElement('div');
+                            watermarkInnerDom = document.createElement('div');
+                            this.watermarkDom.__WATERMARK__ = 'watermark';
+                            this.watermarkDom.__WATERMARK__INSTANCE__ = this;
+                            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, "!important;\n    ");
+                            this.watermarkDom.append(watermarkInnerDom);
+                            this.parentElement.appendChild(this.watermarkDom);
+                            if (this.options.mutationObserve) {
+                                try {
+                                    this.bindMutationObserve();
+                                }
+                                catch (e) {
+                                    (_e = (_d = this.options).onObserveError) === null || _e === void 0 ? void 0 : _e.call(_d);
+                                }
+                            }
+                            firstDraw && ((_g = (_f = this.options).onSuccess) === null || _g === void 0 ? void 0 : _g.call(_f));
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Delete this watermark.
+         */
+        Watermark.prototype.destroy = function () {
+            this.remove();
+            this.watermarkDom = undefined;
+        };
+        Watermark.prototype.check = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
+                            this.remove();
+                            return [4 /*yield*/, this.create()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Watermark.prototype.remove = function () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
+            (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
+            if (!isUndefined(this.checkWatermarkElementRequestID)) {
+                cancelAnimationFrame(this.checkWatermarkElementRequestID);
+            }
+            (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
+            (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
+        };
+        Watermark.prototype.initConfigData = function (args, mode) {
+            var _this = this;
+            if (mode === void 0) { mode = 'overwrite'; }
+            this.props = args;
+            if (mode === 'overwrite') {
+                this.options = Object.assign({}, initialOptions, args);
+            }
+            else {
+                Object.keys(args).forEach(function (key) {
+                    _this.options[key] = args[key];
+                });
+            }
+            this.changeParentElement(this.options.parent);
+            this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
+        };
+        Watermark.prototype.changeParentElement = function (parent) {
+            if (typeof parent === 'string') {
+                var parentElement = document.querySelector(parent);
+                parentElement && (this.parentElement = parentElement);
+            }
+            else {
+                this.parentElement = parent;
+            }
+        };
+        Watermark.prototype.validateUnique = function () {
+            var result = true;
+            if (this.options.unique) {
+                this.parentElement.childNodes.forEach(function (node) {
+                    if (!result) {
+                        return;
+                    }
+                    if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
+                        result = false;
+                        // throw new Error('duplicate watermark error')
+                    }
+                });
+            }
+            return result;
+        };
+        Watermark.prototype.validateContent = function () {
+            switch (this.options.contentType) {
+                case 'image':
+                    return Object.hasOwnProperty.call(this.options, 'image');
+                case 'multi-line-text':
+                case 'rich-text':
+                case 'text':
+                    return this.options.content.length > 0;
+            }
+            return false;
+        };
         Watermark.prototype.checkParentElementType = function () {
             if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
                 return 'root';
@@ -995,15 +1011,6 @@
                 characterData: true // 节点内容或节点文本的变动。
             });
         };
-        Watermark.prototype.clearCanvas = function () {
-            var ctx = this.canvas.getContext('2d');
-            if (ctx === null) {
-                throw new Error('get context error');
-            }
-            ctx.restore();
-            ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-            // this.canvas.width = this.options.w
-        };
         return Watermark;
     }());