watermark-js-plus 0.8.23 → 0.9.2

package/dist/index.browser.js

@@ -0,0 +1,946 @@
+var watermark = (function (exports) {
+    'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    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 */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    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;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (g && (g = 0, op[0] && (_ = 0)), _) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } 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 };
+        }
+    }
+
+    var convertImage = function (canvas) {
+        return canvas.toDataURL('image/png', 1);
+    };
+    var isFunction = function (value) {
+        return typeof value === 'function';
+    };
+    var isUndefined = function (value) {
+        return value === undefined;
+    };
+    var createSVGElement = function (tagName, attrs, namespaceURI) {
+        if (attrs === void 0) { attrs = {}; }
+        if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
+        var element = document.createElementNS(namespaceURI, tagName);
+        for (var attr in attrs) {
+            element.setAttribute(attr, attrs[attr]);
+        }
+        return element;
+    };
+    var getMultiLineData = function (ctx, text, maxWidth) {
+        var result = [];
+        var str = '';
+        for (var i = 0, len = text.length; i < len; i++) {
+            str += text.charAt(i);
+            if (ctx.measureText(str).width > maxWidth) {
+                result.push(str.substring(0, str.length - 1));
+                str = '';
+                i--;
+            }
+        }
+        result.push(str);
+        return result;
+    };
+    var createCustomContentSVG = function (ctx, options) {
+        var svgElement = createSVGElement('svg', {
+            xmlns: 'http://www.w3.org/2000/svg'
+        });
+        var bodyElement = document.createElement('div');
+        bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+        bodyElement.style.cssText = "\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font: ".concat(ctx.font, ";\n  color: ").concat(options.fontColor, ";\n");
+        bodyElement.innerHTML = "<div class=\"rich-text-content\">".concat(options.content, "</div>");
+        document.body.appendChild(bodyElement);
+        var _a = bodyElement.querySelector('.rich-text-content'), offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
+        document.body.removeChild(bodyElement);
+        var width = options.richTextWidth || offsetWidth || options.width;
+        var height = options.richTextHeight || offsetHeight || options.height;
+        var foreignObjectElement = createSVGElement('foreignObject', {
+            width: width.toString(),
+            height: height.toString()
+        });
+        foreignObjectElement.appendChild(bodyElement);
+        svgElement.appendChild(foreignObjectElement);
+        return {
+            element: svgElement,
+            width: width,
+            height: height
+        };
+    };
+    var convertSVGToImage = function (svg) {
+        var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
+        return "data:image/svg+xml;charset=utf-8,".concat(richContent);
+    };
+    var getValue = function (v1, v2) {
+        if (isUndefined(v1)) {
+            return v2;
+        }
+        else {
+            return v1;
+        }
+    };
+    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');
+        !isUndefined(width) && (image.width = width);
+        !isUndefined(height) && (image.height = height);
+        image.src = url;
+        return new Promise(function (resolve) {
+            image.onload = function () {
+                resolve(image);
+            };
+        });
+    };
+
+    var initialOptions = {
+        width: 300,
+        height: 300,
+        rotate: 45,
+        auxiliaryLine: false,
+        translatePlacement: 'middle',
+        contentType: 'text',
+        content: 'hello watermark-js-plus',
+        textType: 'fill',
+        imageWidth: 0,
+        imageHeight: 0,
+        lineHeight: 30,
+        zIndex: 2147483647,
+        backgroundPosition: '0 0, 0 0',
+        backgroundRepeat: 'repeat',
+        fontSize: '20px',
+        fontFamily: 'sans-serif',
+        fontStyle: '',
+        fontVariant: '',
+        fontColor: '#000',
+        fontWeight: 'normal',
+        filter: 'none',
+        globalAlpha: 0.5,
+        mode: 'default',
+        mutationObserve: true,
+        unique: true,
+        parent: 'body',
+        onSuccess: function () { },
+        onBeforeDestroy: function () { },
+        onDestroyed: function () { },
+        onObserveError: function () { }
+    };
+    var generateRecommendOptions = function (canvas, options, args) {
+        var ctx = canvas.getContext('2d');
+        if (ctx === null) {
+            throw new Error('get context error');
+        }
+        ctx.font = "".concat(options.fontStyle, " ").concat(options.fontVariant, " ").concat(options.fontWeight, " ").concat(options.fontSize, " ").concat(options.fontFamily);
+        ctx.filter = options.filter;
+        if (options === null || options === void 0 ? void 0 : options.rotate) {
+            options.rotate = (360 - options.rotate % 360) * (Math.PI / 180);
+        }
+        if (isUndefined(args.textRowMaxWidth)) {
+            options.textRowMaxWidth = options.width;
+        }
+        var result = {
+            image: {
+                rect: {
+                    width: options.imageWidth,
+                    height: options.imageHeight
+                },
+                position: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            textLine: {
+                data: [],
+                yOffsetValue: 0
+            },
+            advancedStyleParams: {
+                linear: {
+                    x0: 0,
+                    x1: 0
+                },
+                radial: {
+                    x0: 0,
+                    y0: 0,
+                    r0: 0,
+                    x1: 0,
+                    y1: 0,
+                    r1: 0
+                },
+                conic: {
+                    x: 0,
+                    y: 0,
+                    startAngle: 0
+                },
+                pattern: {}
+            }
+        };
+        switch (options.contentType) {
+            case 'text':
+                result.textLine.data = [options.content];
+                break;
+            // case 'image':
+            //   break
+            case 'multi-line-text':
+                result.textLine.data = getMultiLineData(ctx, options.content, options.textRowMaxWidth);
+                break;
+            // case 'rich-text':
+            //   break
+        }
+        var translateX = options.width / 2;
+        var translateY = options.height / 2;
+        var textBaseline = 'middle';
+        var textAlign = 'center';
+        if (!isUndefined(args === null || args === void 0 ? void 0 : args.translateX) && !isUndefined(args === null || args === void 0 ? void 0 : args.translateY)) {
+            translateX = args === null || args === void 0 ? void 0 : args.translateX;
+            translateY = args === null || args === void 0 ? void 0 : args.translateY;
+            textBaseline = 'top';
+            textAlign = 'left';
+        }
+        else {
+            // default middle
+            // translateX = options.width / 2
+            // translateY = options.height / 2
+            // TextBaselineType = 'middle'
+            // textAlign = 'center'
+            result.advancedStyleParams.linear.x0 = -options.width / 2;
+            result.advancedStyleParams.linear.x1 = options.width / 2;
+            // result.advancedStyleParams.radial.x0 = 0
+            // result.advancedStyleParams.radial.y0 = 0
+            result.advancedStyleParams.radial.r0 = 0;
+            // result.advancedStyleParams.radial.x1 = 0
+            // result.advancedStyleParams.radial.y1 = 0
+            result.advancedStyleParams.radial.r1 = options.width / 2;
+            // result.advancedStyleParams.conic.x = 0
+            // result.advancedStyleParams.conic.y = 0
+        }
+        switch (args.translatePlacement) {
+            case 'top':
+                translateX = options.width / 2;
+                translateY = 0;
+                textBaseline = 'top';
+                // textAlign = 'center'
+                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.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.r1 = options.width / 2
+                // result.advancedStyleParams.conic.x = 0
+                result.advancedStyleParams.conic.y = result.textLine.data.length * options.lineHeight / 2;
+                break;
+            case 'top-start':
+                translateX = 0;
+                translateY = 0;
+                textBaseline = 'top';
+                textAlign = 'start';
+                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.r0 = 0
+                result.advancedStyleParams.radial.x1 = options.width / 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;
+                break;
+            case 'top-end':
+                translateX = options.width;
+                translateY = 0;
+                textBaseline = 'top';
+                textAlign = 'end';
+                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.r0 = 0
+                result.advancedStyleParams.radial.x1 = -options.width / 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;
+                break;
+            case 'bottom':
+                translateX = options.width / 2;
+                translateY = options.height;
+                textBaseline = 'bottom';
+                // textAlign = 'center'
+                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.r0 = 0
+                // result.advancedStyleParams.radial.x1 = 0
+                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;
+                break;
+            case 'bottom-start':
+                translateX = 0;
+                translateY = options.height;
+                textBaseline = 'bottom';
+                textAlign = 'start';
+                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.r0 = 0
+                result.advancedStyleParams.radial.x1 = options.width / 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;
+                break;
+            case 'bottom-end':
+                translateX = options.width;
+                translateY = options.height;
+                textBaseline = 'bottom';
+                textAlign = 'end';
+                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.r0 = 0
+                result.advancedStyleParams.radial.x1 = -options.width / 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;
+                break;
+            case 'left':
+                translateX = 0;
+                translateY = options.height / 2;
+                // TextBaselineType = 'middle'
+                textAlign = 'start';
+                result.advancedStyleParams.linear.x0 = 0;
+                result.advancedStyleParams.linear.x1 = options.width;
+                result.advancedStyleParams.radial.x0 = options.width / 2;
+                // result.advancedStyleParams.radial.y0 = 0
+                // result.advancedStyleParams.radial.r0 = 0
+                result.advancedStyleParams.radial.x1 = options.width / 2;
+                // result.advancedStyleParams.radial.y1 = 0
+                // result.advancedStyleParams.radial.r1 = options.width / 2
+                result.advancedStyleParams.conic.x = options.width / 2;
+                result.advancedStyleParams.conic.y = 0;
+                break;
+            case 'right':
+                translateX = options.width;
+                translateY = options.height / 2;
+                // TextBaselineType = 'middle'
+                textAlign = 'end';
+                result.advancedStyleParams.linear.x0 = 0;
+                result.advancedStyleParams.linear.x1 = -options.width;
+                result.advancedStyleParams.radial.x0 = -options.width / 2;
+                // result.advancedStyleParams.radial.y0 = 0
+                // result.advancedStyleParams.radial.r0 = 0
+                result.advancedStyleParams.radial.x1 = -options.width / 2;
+                // result.advancedStyleParams.radial.y1 = 0
+                // result.advancedStyleParams.radial.r1 = options.width / 2
+                result.advancedStyleParams.conic.x = -options.width / 2;
+                result.advancedStyleParams.conic.y = 0;
+                break;
+        }
+        options.translateX = translateX;
+        options.translateY = translateY;
+        isUndefined(args === null || args === void 0 ? void 0 : args.textBaseline) && (options.textBaseline = textBaseline);
+        isUndefined(args === null || args === void 0 ? void 0 : args.textAlign) && (options.textAlign = textAlign);
+        if (options.contentType === 'multi-line-text') {
+            switch (options.textBaseline) {
+                case 'middle':
+                    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;
+                    break;
+                case 'top':
+                case 'hanging':
+                    result.textLine.yOffsetValue = 0;
+                    break;
+            }
+        }
+        return result;
+    };
+
+    var bootstrap = (function () {
+        if (typeof window !== 'undefined') {
+            Object.defineProperty(window, 'MutationObserver', {
+                writable: false,
+                configurable: false
+            });
+            Object.defineProperty(window, 'requestAnimationFrame', {
+                writable: false,
+                configurable: false
+            });
+        }
+    });
+
+    /**
+     * 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 = Watermark.createCanvas(this.options.width, this.options.height);
+            this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
+            bootstrap();
+        }
+        /**
+         * Create an HD canvas.
+         * @param width - width of canvas
+         * @param height - height of canvas
+         */
+        Watermark.createCanvas = function (width, height) {
+            var _a;
+            var ratio = window.devicePixelRatio || 1;
+            var canvas = document.createElement('canvas');
+            canvas.width = width * ratio; // actual rendered pixel
+            canvas.height = height * ratio; // actual rendered pixel
+            canvas.style.width = "".concat(width, "px"); // control display size
+            canvas.style.height = "".concat(height, "px"); // control display size
+            (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
+            return canvas;
+        };
+        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;
+            return __awaiter(this, void 0, void 0, function () {
+                var firstDraw, image, watermarkInnerDom, parentElementType;
+                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();
+                            image = convertImage(this.canvas);
+                            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    ");
+                            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(this.options.width, "px ").concat(this.options.height, "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 () {
+            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.check = function () {
+            if (!document.body.contains(this.watermarkDom)) {
+                this.destroy();
+                this.create();
+            }
+        };
+        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 = Watermark.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;
+            }
+        };
+        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.draw = function () {
+            var _this = this;
+            var ctx = this.canvas.getContext('2d');
+            if (ctx === null) {
+                throw new Error('get context error');
+            }
+            if (this.options.auxiliaryLine) {
+                ctx.beginPath();
+                ctx.rect(1, 1, this.options.width, this.options.height);
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = '#000';
+                ctx.stroke();
+                ctx.closePath();
+                ctx.beginPath();
+                ctx.rect(this.options.translateX, this.options.translateY, 1, 1);
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = '#f00';
+                ctx.stroke();
+                ctx.closePath();
+            }
+            this.setStyle(ctx);
+            ctx.save();
+            ctx.translate(this.options.translateX, this.options.translateY);
+            ctx.rotate(this.options.rotate);
+            return new Promise(function (resolve) {
+                switch (_this.options.contentType) {
+                    case 'text':
+                        _this.drawText(ctx, resolve);
+                        break;
+                    case 'image':
+                        _this.drawImage(ctx, resolve);
+                        break;
+                    case 'multi-line-text':
+                        _this.drawMultiLineText(ctx, resolve);
+                        break;
+                    case 'rich-text':
+                        _this.drawRichText(ctx, resolve);
+                        break;
+                }
+            });
+        };
+        Watermark.prototype.setStyle = function (ctx) {
+            var _a;
+            var propName = 'fillStyle';
+            if (this.options.textType === 'stroke') {
+                propName = 'strokeStyle';
+            }
+            var style = this.options.fontColor;
+            if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) {
+                switch (this.options.advancedStyle.type) {
+                    case 'linear':
+                        style = this.createLinearGradient(ctx);
+                        break;
+                    case 'radial':
+                        style = this.createRadialGradient(ctx);
+                        break;
+                    case 'conic':
+                        style = this.createConicGradient(ctx);
+                        break;
+                    case 'pattern':
+                        style = this.createPattern(ctx);
+                        break;
+                }
+            }
+            ctx[propName] && style && (ctx[propName] = style);
+            this.options.textAlign && (ctx.textAlign = this.options.textAlign);
+            this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
+            ctx.globalAlpha = this.options.globalAlpha;
+            if (this.options.shadowStyle) {
+                ctx.shadowBlur = getValue(this.options.shadowStyle.shadowBlur, 0);
+                ctx.shadowColor = getValue(this.options.shadowStyle.shadowColor, '#00000000');
+                ctx.shadowOffsetX = getValue(this.options.shadowStyle.shadowOffsetX, 0);
+                ctx.shadowOffsetY = getValue(this.options.shadowStyle.shadowOffsetY, 0);
+            }
+            if (isFunction(this.options.extraDrawFunc)) {
+                this.options.extraDrawFunc(ctx);
+            }
+        };
+        Watermark.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) {
+                gradient.addColorStop(item.offset, item.color);
+            });
+            return gradient;
+        };
+        Watermark.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) {
+                gradient.addColorStop(item.offset, item.color);
+            });
+            return gradient;
+        };
+        Watermark.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) {
+                gradient.addColorStop(item.offset, item.color);
+            });
+            return gradient;
+        };
+        Watermark.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) {
+            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) {
+            this.setText(ctx, {
+                text: this.options.content,
+                x: 0,
+                y: 0,
+                maxWidth: this.options.textRowMaxWidth || this.options.width
+            });
+            resolve(ctx.canvas);
+        };
+        Watermark.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;
+                var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
+                ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
+                resolve(ctx.canvas);
+            });
+        };
+        Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
+            var _this = this;
+            // image.width = this.options.width
+            // image.height = this.options.height
+            // const element = createCustomContentSvg(context, this.options)
+            // image.src = convertSVGToImage(element)
+            // image.onload = () => {
+            //   context.translate(this.options.width / 2, this.options.height / 2)
+            //   context.rotate(this.options.rotate)
+            //   context.drawImage(
+            //     image,
+            //     -this.options.width / 2,
+            //     -this.options.height / 2,
+            //     context.canvas.width,
+            //     context.canvas.height
+            //   )
+            //   resolve(canvas)
+            // }
+            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 });
+            });
+            resolve(ctx.canvas);
+        };
+        Watermark.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) {
+                var imagePosition = _this.getDrawImagePosition(image.width, image.height);
+                ctx.drawImage(image, imagePosition.x, imagePosition.y, ctx.canvas.width, ctx.canvas.height);
+                resolve(ctx.canvas);
+            });
+        };
+        Watermark.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:
+                    rect.height = rect.width * image.height / image.width;
+                    break;
+                case rect.width === 0 && rect.height !== 0:
+                    rect.width = rect.height * image.width / image.height;
+                    break;
+                case rect.width === 0 && rect.height === 0:
+                    rect.width = image.width;
+                    rect.height = image.height;
+                    break;
+            }
+            return rect;
+        };
+        Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
+            var _a, _b;
+            var result = {
+                x: -imageWidth / 2,
+                y: -imageHeight / 2
+            };
+            switch (this.options.translatePlacement) {
+                case 'top':
+                    result.x = -imageWidth / 2;
+                    result.y = 0;
+                    break;
+                case 'top-start':
+                    result.x = 0;
+                    result.y = 0;
+                    break;
+                case 'top-end':
+                    result.x = -imageWidth;
+                    result.y = 0;
+                    break;
+                case 'bottom':
+                    result.x = -imageWidth / 2;
+                    result.y = -imageHeight;
+                    break;
+                case 'bottom-start':
+                    result.x = 0;
+                    result.y = -imageHeight;
+                    break;
+                case 'bottom-end':
+                    result.x = -imageWidth;
+                    result.y = -imageHeight;
+                    break;
+                case 'left':
+                    result.x = 0;
+                    result.y = -imageHeight / 2;
+                    break;
+                case 'right':
+                    result.x = -imageWidth;
+                    result.y = -imageHeight / 2;
+                    break;
+            }
+            !isUndefined((_a = this.props) === null || _a === void 0 ? void 0 : _a.translateX) && (result.x = 0);
+            !isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
+            return result;
+        };
+        Watermark.prototype.checkParentElementType = function () {
+            if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
+                return 'root';
+            }
+            return 'custom';
+        };
+        Watermark.prototype.checkWatermarkElement = function () {
+            if (!document.body.contains(this.watermarkDom)) {
+                this.destroy();
+                this.create();
+            }
+            this.checkWatermarkElementRequestID = requestAnimationFrame(this.checkWatermarkElement.bind(this));
+        };
+        Watermark.prototype.bindMutationObserve = function () {
+            var _this = this;
+            if (!this.watermarkDom) {
+                return;
+            }
+            this.checkWatermarkElementRequestID = requestAnimationFrame(this.checkWatermarkElement.bind(this));
+            this.observer = new MutationObserver(function (mutationsList) {
+                if (mutationsList.length > 0) {
+                    _this.destroy();
+                    _this.create();
+                }
+            });
+            this.observer.observe(this.watermarkDom, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                characterData: true // 节点内容或节点文本的变动。
+            });
+            this.parentObserve = new MutationObserver(function (mutationsList) {
+                mutationsList.forEach(function (item) {
+                    var _a;
+                    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)) {
+                        _this.destroy();
+                        _this.create();
+                    }
+                });
+            });
+            this.parentObserve.observe(this.parentElement, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                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;
+    }());
+
+    /**
+     * BlindWatermark class
+     */
+    var BlindWatermark = /** @class */ (function (_super) {
+        __extends(BlindWatermark, _super);
+        /**
+         * BlindWatermark constructor
+         * @param props - blind watermark options
+         */
+        function BlindWatermark(props) {
+            if (props === void 0) { props = {}; }
+            props.globalAlpha = 0.005;
+            props.mode = 'blind';
+            return _super.call(this, props) || this;
+        }
+        /**
+         * Decode blind watermark.
+         * @param props - decode options
+         */
+        BlindWatermark.decode = function (props) {
+            var options = Object.assign({
+                url: '',
+                fillColor: '#000',
+                compositeOperation: 'color-burn',
+                mode: 'canvas'
+            }, props);
+            if (!options.url) {
+                return;
+            }
+            if (options.mode === 'canvas') {
+                var img_1 = new Image();
+                img_1.src = options.url;
+                img_1.onload = function () {
+                    var _a;
+                    var width = img_1.width, height = img_1.height;
+                    var canvas = Watermark.createCanvas(width, height);
+                    var ctx = canvas.getContext('2d');
+                    if (ctx === null) {
+                        throw new Error('get context error');
+                    }
+                    ctx.drawImage(img_1, 0, 0, width, height);
+                    ctx.globalCompositeOperation = options.compositeOperation;
+                    ctx.fillStyle = options.fillColor;
+                    ctx.fillRect(0, 0, width, height);
+                    var resultImage = convertImage(canvas);
+                    if (options.onSuccess && isFunction(options.onSuccess)) {
+                        (_a = options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options, resultImage);
+                    }
+                };
+            }
+        };
+        return BlindWatermark;
+    }(Watermark));
+
+    exports.BlindWatermark = BlindWatermark;
+    exports.Watermark = Watermark;
+
+    return exports;
+
+})({});
+//# sourceMappingURL=index.browser.js.map