watermark-js-plus 0.3.0 → 0.5.1

package/dist/core/watermark.d.ts

@@ -8,6 +8,7 @@ export default class Watermark {
     private observer?;
     private parentObserve?;
     private watermarkDom?;
+    private props?;
     /**
      * Watermark constructor
      * @param props - watermark options
@@ -32,11 +33,14 @@ export default class Watermark {
     private validateUnique;
     private validateContent;
     private draw;
+    private setTextStyle;
+    private setText;
     private drawText;
     private drawImage;
     private drawMultiLineText;
     private drawRichText;
     private getImageRect;
+    private getDrawImagePosition;
     private checkParentElementType;
     private bindMutationObserve;
 }

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export type TextBaselineType = 'alphabetic' | 'hanging' | 'ideographic' | 'top'
 export type CreateWatermarkModeType = 'default' | 'blind';
 export type DecodeBlindWatermarkModeType = 'canvas' | 'html' | 'svg';
 export type TranslatePlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right' | 'middle';
+export type TextType = 'fill' | 'stroke';
 export interface WatermarkDom extends HTMLDivElement {
     __WATERMARK__?: string;
     __WATERMARK__INSTANCE__?: any;
@@ -17,9 +18,13 @@ export interface WatermarkOptions {
     translateY?: number;
     contentType: ContentTypeType;
     content: string;
+    textType: TextType;
+    textRowMaxWidth?: number;
     image?: string;
     imageWidth: number;
     imageHeight: number;
+    richTextWidth?: number;
+    richTextHeight?: number;
     lineHeight: number;
     zIndex: number;
     backgroundPosition: string;
@@ -46,3 +51,8 @@ export interface DecodeBlindWatermarkOptions {
     mode: DecodeBlindWatermarkModeType;
     onSuccess: Function;
 }
+export interface CustomContentSVGType {
+    element: Element;
+    width: number;
+    height: number;
+}

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { WatermarkOptions } from '../types';
+import { CustomContentSVGType, WatermarkOptions } from '../types';
 export declare const convertImage: (canvas: HTMLCanvasElement) => string;
 export declare const isFunction: (value: Function) => boolean;
 export declare const isUndefined: (value: any) => boolean;
@@ -6,5 +6,5 @@ export declare const createSVGElement: (tagName: string, attrs?: {
     [key: string]: string;
 }, namespaceURI?: string) => Element;
 export declare const getMultiLineData: (ctx: CanvasRenderingContext2D, text: string, maxWidth: number) => string[];
-export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) => Element;
+export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) => CustomContentSVGType;
 export declare const convertSVGToImage: (svg: Element) => string;

package/dist/watermark.esm.js

@@ -103,17 +103,26 @@ var createCustomContentSVG = function (ctx, options) {
     var svgElement = createSVGElement('svg', {
         xmlns: 'http://www.w3.org/2000/svg'
     });
-    var foreignObjectElement = createSVGElement('foreignObject', {
-        width: options.width.toString(),
-        height: options.height.toString()
-    });
     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 = options.content;
+    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 svgElement;
+    return {
+        element: svgElement,
+        width: width,
+        height: height
+    };
 };
 var convertSVGToImage = function (svg) {
     var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
@@ -131,6 +140,7 @@ var Watermark = /** @class */ (function () {
     function Watermark(props) {
         if (props === void 0) { props = {}; }
         this.parentElement = document.body;
+        this.props = props;
         this.options = Object.assign({
             width: 300,
             height: 300,
@@ -138,6 +148,7 @@ var Watermark = /** @class */ (function () {
             translatePlacement: 'middle',
             contentType: 'text',
             content: 'hello watermark-js-plus',
+            textType: 'fill',
             imageWidth: 0,
             imageHeight: 0,
             lineHeight: 30,
@@ -235,7 +246,7 @@ var Watermark = /** @class */ (function () {
         (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
     };
     Watermark.prototype.initializeOptions = function () {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g;
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
             this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
         }
@@ -293,10 +304,14 @@ var Watermark = /** @class */ (function () {
                 translateY = this.options.height / 2;
                 break;
         }
-        isUndefined(this.options.translateX) && (this.options.translateX = translateX);
-        isUndefined(this.options.translateY) && (this.options.translateY = translateY);
-        isUndefined(this.options.textBaseline) && (this.options.textBaseline = textBaseline);
-        isUndefined(this.options.textAlign) && (this.options.textAlign = textAlign);
+        if (!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateX) || !isUndefined((_c = this.props) === null || _c === void 0 ? void 0 : _c.translateY)) {
+            textBaseline = 'top';
+            textAlign = 'left';
+        }
+        isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
+        isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
+        isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
+        isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
     };
     Watermark.prototype.validateUnique = function () {
         var result = true;
@@ -335,7 +350,7 @@ var Watermark = /** @class */ (function () {
         ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
         this.options.textAlign && (ctx.textAlign = this.options.textAlign);
         this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
-        ctx.fillStyle = this.options.fontColor;
+        this.setTextStyle(ctx);
         ctx.globalAlpha = this.options.globalAlpha;
         ctx.translate(this.options.translateX, this.options.translateY);
         ctx.rotate(this.options.rotate);
@@ -356,8 +371,27 @@ var Watermark = /** @class */ (function () {
             }
         });
     };
+    Watermark.prototype.setTextStyle = function (ctx) {
+        var propName = 'fillStyle';
+        if (this.options.textType === 'stroke') {
+            propName = 'strokeStyle';
+        }
+        ctx[propName] && (ctx[propName] = this.options.fontColor);
+    };
+    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) {
-        ctx.fillText(this.options.content, 0, 0);
+        this.setText(ctx, {
+            text: this.options.content,
+            x: 0,
+            y: 0,
+            maxWidth: this.options.textRowMaxWidth
+        });
         resolve(ctx.canvas);
     };
     Watermark.prototype.drawImage = function (ctx, resolve) {
@@ -367,7 +401,8 @@ var Watermark = /** @class */ (function () {
         image.src = this.options.image;
         image.onload = function () {
             var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
-            ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
+            var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
+            ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
             resolve(ctx.canvas);
         };
     };
@@ -389,22 +424,38 @@ var Watermark = /** @class */ (function () {
         //   )
         //   resolve(canvas)
         // }
-        var lines = getMultiLineData(ctx, this.options.content, this.options.width);
-        var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
-        lines.forEach(function (txt, index) {
-            ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
+        var width = this.options.textRowMaxWidth || this.options.width;
+        var lines = getMultiLineData(ctx, this.options.content, width);
+        var yOffsetValue;
+        switch (this.options.textBaseline) {
+            case 'middle':
+                yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
+                break;
+            case 'bottom':
+            case 'alphabetic':
+            case 'ideographic':
+                yOffsetValue = (lines.length - 1) * this.options.lineHeight;
+                break;
+            case 'top':
+            case 'hanging':
+                yOffsetValue = 0;
+                break;
+        }
+        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);
         var image = new Image();
-        image.width = this.options.width;
-        image.height = this.options.height;
-        var element = createCustomContentSVG(ctx, this.options);
-        image.src = convertSVGToImage(element);
+        image.width = obj.width;
+        image.height = obj.height;
+        image.src = convertSVGToImage(obj.element);
         image.onload = function () {
-            ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
+            var imagePosition = _this.getDrawImagePosition(image.width, image.height);
+            ctx.drawImage(image, imagePosition.x, imagePosition.y, ctx.canvas.width, ctx.canvas.height);
             resolve(ctx.canvas);
         };
     };
@@ -424,6 +475,50 @@ var Watermark = /** @class */ (function () {
         }
         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';

package/dist/watermark.umd.js

@@ -109,17 +109,26 @@
         var svgElement = createSVGElement('svg', {
             xmlns: 'http://www.w3.org/2000/svg'
         });
-        var foreignObjectElement = createSVGElement('foreignObject', {
-            width: options.width.toString(),
-            height: options.height.toString()
-        });
         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 = options.content;
+        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 svgElement;
+        return {
+            element: svgElement,
+            width: width,
+            height: height
+        };
     };
     var convertSVGToImage = function (svg) {
         var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
@@ -137,6 +146,7 @@
         function Watermark(props) {
             if (props === void 0) { props = {}; }
             this.parentElement = document.body;
+            this.props = props;
             this.options = Object.assign({
                 width: 300,
                 height: 300,
@@ -144,6 +154,7 @@
                 translatePlacement: 'middle',
                 contentType: 'text',
                 content: 'hello watermark-js-plus',
+                textType: 'fill',
                 imageWidth: 0,
                 imageHeight: 0,
                 lineHeight: 30,
@@ -241,7 +252,7 @@
             (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
         };
         Watermark.prototype.initializeOptions = function () {
-            var _a;
+            var _a, _b, _c, _d, _e, _f, _g;
             if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
                 this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
             }
@@ -299,10 +310,14 @@
                     translateY = this.options.height / 2;
                     break;
             }
-            isUndefined(this.options.translateX) && (this.options.translateX = translateX);
-            isUndefined(this.options.translateY) && (this.options.translateY = translateY);
-            isUndefined(this.options.textBaseline) && (this.options.textBaseline = textBaseline);
-            isUndefined(this.options.textAlign) && (this.options.textAlign = textAlign);
+            if (!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateX) || !isUndefined((_c = this.props) === null || _c === void 0 ? void 0 : _c.translateY)) {
+                textBaseline = 'top';
+                textAlign = 'left';
+            }
+            isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
+            isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
+            isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
+            isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
         };
         Watermark.prototype.validateUnique = function () {
             var result = true;
@@ -341,7 +356,7 @@
             ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
             this.options.textAlign && (ctx.textAlign = this.options.textAlign);
             this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
-            ctx.fillStyle = this.options.fontColor;
+            this.setTextStyle(ctx);
             ctx.globalAlpha = this.options.globalAlpha;
             ctx.translate(this.options.translateX, this.options.translateY);
             ctx.rotate(this.options.rotate);
@@ -362,8 +377,27 @@
                 }
             });
         };
+        Watermark.prototype.setTextStyle = function (ctx) {
+            var propName = 'fillStyle';
+            if (this.options.textType === 'stroke') {
+                propName = 'strokeStyle';
+            }
+            ctx[propName] && (ctx[propName] = this.options.fontColor);
+        };
+        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) {
-            ctx.fillText(this.options.content, 0, 0);
+            this.setText(ctx, {
+                text: this.options.content,
+                x: 0,
+                y: 0,
+                maxWidth: this.options.textRowMaxWidth
+            });
             resolve(ctx.canvas);
         };
         Watermark.prototype.drawImage = function (ctx, resolve) {
@@ -373,7 +407,8 @@
             image.src = this.options.image;
             image.onload = function () {
                 var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
-                ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
+                var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
+                ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
                 resolve(ctx.canvas);
             };
         };
@@ -395,22 +430,38 @@
             //   )
             //   resolve(canvas)
             // }
-            var lines = getMultiLineData(ctx, this.options.content, this.options.width);
-            var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
-            lines.forEach(function (txt, index) {
-                ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
+            var width = this.options.textRowMaxWidth || this.options.width;
+            var lines = getMultiLineData(ctx, this.options.content, width);
+            var yOffsetValue;
+            switch (this.options.textBaseline) {
+                case 'middle':
+                    yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
+                    break;
+                case 'bottom':
+                case 'alphabetic':
+                case 'ideographic':
+                    yOffsetValue = (lines.length - 1) * this.options.lineHeight;
+                    break;
+                case 'top':
+                case 'hanging':
+                    yOffsetValue = 0;
+                    break;
+            }
+            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);
             var image = new Image();
-            image.width = this.options.width;
-            image.height = this.options.height;
-            var element = createCustomContentSVG(ctx, this.options);
-            image.src = convertSVGToImage(element);
+            image.width = obj.width;
+            image.height = obj.height;
+            image.src = convertSVGToImage(obj.element);
             image.onload = function () {
-                ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
+                var imagePosition = _this.getDrawImagePosition(image.width, image.height);
+                ctx.drawImage(image, imagePosition.x, imagePosition.y, ctx.canvas.width, ctx.canvas.height);
                 resolve(ctx.canvas);
             };
         };
@@ -430,6 +481,50 @@
             }
             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';

package/dist/watermark.umd.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{c(o.next(t))}catch(t){r(t)}}function s(t){try{c(o.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}c((o=o.apply(t,e||[])).next())}))}function o(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i=function(t){return t.toDataURL("image/png",1)},r=function(t){return void 0===t},a=function(t,e,n){void 0===e&&(e={}),void 0===n&&(n="http://www.w3.org/2000/svg");var o=document.createElementNS(n,t);for(var i in e)o.setAttribute(i,e[i]);return o},s=function(){function t(t){void 0===t&&(t={}),this.parentElement=document.body,this.options=Object.assign({width:300,height:300,rotate:45,translatePlacement:"middle",contentType:"text",content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:"default",mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),this.changeParentElement(this.options.parent),this.initializeOptions()}return t.createCanvas=function(t,e){var n,o=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*o,i.height=e*o,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(n=i.getContext("2d"))||void 0===n||n.setTransform(o,0,0,o,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return n(this,void 0,void 0,(function(){var n,r,a,s;return o(this,(function(o){switch(o.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return n=o.sent(),r=i(n),this.watermarkDom=document.createElement("div"),a=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,s=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===s?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n    "),a.style.cssText="\n      position: ".concat("root"===s?"fixed;":"absolute;","\n      z-index: ").concat(this.options.zIndex,";\n      pointer-events: none;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background-image: url(").concat(r,");\n      background-repeat: ").concat(this.options.backgroundRepeat,";\n      background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n      background-position: ").concat(this.options.backgroundPosition,";\n      -webkit-print-color-adjust: exact;\n    "),this.watermarkDom.append(a),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,n,o,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(n=this.observer)||void 0===n||n.disconnect(),null===(o=this.parentObserve)||void 0===o||o.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.initializeOptions=function(){var t,e,n;(null===(t=this.options)||void 0===t?void 0:t.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180));var o="middle",i="center";switch(this.options.translatePlacement){case"top":e=this.options.width/2,n=0,o="top";break;case"top-start":e=0,n=0,o="top",i="start";break;case"top-end":e=this.options.width,n=0,o="top",i="end";break;case"bottom":e=this.options.width/2,n=this.options.height,o="bottom";break;case"bottom-start":e=0,n=this.options.height,o="bottom",i="start";break;case"bottom-end":e=this.options.width,n=this.options.height,o="bottom",i="end";break;case"left":e=0,n=this.options.height/2,i="start";break;case"right":e=this.options.width,n=this.options.height/2,i="end";break;case"middle":e=this.options.width/2,n=this.options.height/2}r(this.options.translateX)&&(this.options.translateX=e),r(this.options.translateY)&&(this.options.translateY=n),r(this.options.textBaseline)&&(this.options.textBaseline=o),r(this.options.textAlign)&&(this.options.textAlign=i)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.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!1},t.prototype.draw=function(){var e=this,n=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===n)throw new Error("get context error");return n.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),this.options.textAlign&&(n.textAlign=this.options.textAlign),this.options.textBaseline&&(n.textBaseline=this.options.textBaseline),n.fillStyle=this.options.fontColor,n.globalAlpha=this.options.globalAlpha,n.translate(this.options.translateX,this.options.translateY),n.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(n,t);break;case"image":e.drawImage(n,t);break;case"multi-line-text":e.drawMultiLineText(n,t);break;case"rich-text":e.drawRichText(n,t)}}))},t.prototype.drawText=function(t,e){t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var n=this,o=new Image;o.setAttribute("crossOrigin","Anonymous"),o.src=this.options.image,o.onload=function(){var i=n.getImageRect(o),r=i.width,a=i.height;t.drawImage(o,0-r/2,0-a/2,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var n=this,o=function(t,e,n){for(var o=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>n&&(o.push(i.substring(0,i.length-1)),i="",r--);return o.push(i),o}(t,this.options.content,this.options.width),i=(o.length-1)*this.options.lineHeight/2;o.forEach((function(e,o){t.fillText(e,0,n.options.lineHeight*o-i)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var n=this,o=new Image;o.width=this.options.width,o.height=this.options.height;var i,r=function(t,e){var n=a("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=a("foreignObject",{width:e.width.toString(),height:e.height.toString()}),i=document.createElement("div");return i.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),i.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(t.font,";\n  color: ").concat(e.fontColor,";\n  "),i.innerHTML=e.content,o.appendChild(i),n.appendChild(o),n}(t,this.options);o.src=(i=r.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(i)),o.onload=function(){t.drawImage(o,-n.options.width/2,-n.options.height/2,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var n;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(n=null==e?void 0:e.removedNodes)||void 0===n?void 0:n[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),c=function(t){function n(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(n,t),n.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var n=new Image;n.src=e.url,n.onload=function(){var t,o=n.width,r=n.height,a=s.createCanvas(o,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(n,0,0,o,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,o,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},n}(s);t.BlindWatermark=c,t.Watermark=s}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,o){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},e(t,o)};function o(t,e,o,n){return new(o||(o=Promise))((function(i,r){function a(t){try{c(n.next(t))}catch(t){r(t)}}function s(t){try{c(n.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(a,s)}c((n=n.apply(t,e||[])).next())}))}function n(t,e){var o,n,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(o)throw new TypeError("Generator is already executing.");for(;a;)try{if(o=1,n&&(i=2&r[0]?n.return:r[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;switch(n=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,n=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],n=0}finally{o=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i=function(t){return t.toDataURL("image/png",1)},r=function(t){return void 0===t},a=function(t,e,o){void 0===e&&(e={}),void 0===o&&(o="http://www.w3.org/2000/svg");var n=document.createElementNS(o,t);for(var i in e)n.setAttribute(i,e[i]);return n},s=function(){function t(t){void 0===t&&(t={}),this.parentElement=document.body,this.props=t,this.options=Object.assign({width:300,height:300,rotate:45,translatePlacement:"middle",contentType:"text",content:"hello watermark-js-plus",textType:"fill",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:"default",mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),this.changeParentElement(this.options.parent),this.initializeOptions()}return t.createCanvas=function(t,e){var o,n=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*n,i.height=e*n,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(o=i.getContext("2d"))||void 0===o||o.setTransform(n,0,0,n,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return o(this,void 0,void 0,(function(){var o,r,a,s;return n(this,(function(n){switch(n.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return o=n.sent(),r=i(o),this.watermarkDom=document.createElement("div"),a=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,s=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===s?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n    "),a.style.cssText="\n      position: ".concat("root"===s?"fixed;":"absolute;","\n      z-index: ").concat(this.options.zIndex,";\n      pointer-events: none;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background-image: url(").concat(r,");\n      background-repeat: ").concat(this.options.backgroundRepeat,";\n      background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n      background-position: ").concat(this.options.backgroundPosition,";\n      -webkit-print-color-adjust: exact;\n    "),this.watermarkDom.append(a),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,o,n,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(o=this.observer)||void 0===o||o.disconnect(),null===(n=this.parentObserve)||void 0===n||n.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.initializeOptions=function(){var t,e,o,n,i,a,s,c,h;(null===(t=this.options)||void 0===t?void 0:t.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180));var l="middle",p="center";switch(this.options.translatePlacement){case"top":c=this.options.width/2,h=0,l="top";break;case"top-start":c=0,h=0,l="top",p="start";break;case"top-end":c=this.options.width,h=0,l="top",p="end";break;case"bottom":c=this.options.width/2,h=this.options.height,l="bottom";break;case"bottom-start":c=0,h=this.options.height,l="bottom",p="start";break;case"bottom-end":c=this.options.width,h=this.options.height,l="bottom",p="end";break;case"left":c=0,h=this.options.height/2,p="start";break;case"right":c=this.options.width,h=this.options.height/2,p="end";break;case"middle":c=this.options.width/2,h=this.options.height/2}r(null===(e=this.props)||void 0===e?void 0:e.translateX)&&r(null===(o=this.props)||void 0===o?void 0:o.translateY)||(l="top",p="left"),r(null===(n=this.props)||void 0===n?void 0:n.translateX)&&(this.options.translateX=c),r(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(this.options.translateY=h),r(null===(a=this.props)||void 0===a?void 0:a.textBaseline)&&(this.options.textBaseline=l),r(null===(s=this.props)||void 0===s?void 0:s.textAlign)&&(this.options.textAlign=p)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.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!1},t.prototype.draw=function(){var e=this,o=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===o)throw new Error("get context error");return o.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),this.options.textAlign&&(o.textAlign=this.options.textAlign),this.options.textBaseline&&(o.textBaseline=this.options.textBaseline),this.setTextStyle(o),o.globalAlpha=this.options.globalAlpha,o.translate(this.options.translateX,this.options.translateY),o.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(o,t);break;case"image":e.drawImage(o,t);break;case"multi-line-text":e.drawMultiLineText(o,t);break;case"rich-text":e.drawRichText(o,t)}}))},t.prototype.setTextStyle=function(t){var e="fillStyle";"stroke"===this.options.textType&&(e="strokeStyle"),t[e]&&(t[e]=this.options.fontColor)},t.prototype.setText=function(t,e){var o="fillText";"stroke"===this.options.textType&&(o="strokeText"),t[o]&&t[o](e.text,e.x,e.y,e.maxWidth)},t.prototype.drawText=function(t,e){this.setText(t,{text:this.options.content,x:0,y:0,maxWidth:this.options.textRowMaxWidth}),e(t.canvas)},t.prototype.drawImage=function(t,e){var o=this,n=new Image;n.setAttribute("crossOrigin","Anonymous"),n.src=this.options.image,n.onload=function(){var i=o.getImageRect(n),r=i.width,a=i.height,s=o.getDrawImagePosition(r,a);t.drawImage(n,s.x,s.y,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var o,n=this,i=this.options.textRowMaxWidth||this.options.width,r=function(t,e,o){for(var n=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>o&&(n.push(i.substring(0,i.length-1)),i="",r--);return n.push(i),n}(t,this.options.content,i);switch(this.options.textBaseline){case"middle":o=(r.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(r.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}r.forEach((function(e,i){n.setText(t,{text:e,x:0,y:n.options.lineHeight*i-o})})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var o,n,i=this,r=function(t,e){var o=a("svg",{xmlns:"http://www.w3.org/2000/svg"}),n=document.createElement("div");n.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),n.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(t.font,";\n  color: ").concat(e.fontColor,";\n"),n.innerHTML='<div class="rich-text-content">'.concat(e.content,"</div>"),document.body.appendChild(n);var i=n.querySelector(".rich-text-content"),r=i.offsetHeight,s=i.offsetWidth;document.body.removeChild(n);var c=e.richTextWidth||s||e.width,h=e.richTextHeight||r||e.height,l=a("foreignObject",{width:c.toString(),height:h.toString()});return l.appendChild(n),o.appendChild(l),{element:o,width:c,height:h}}(t,this.options),s=new Image;s.width=r.width,s.height=r.height,s.src=(o=r.element,n=o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),s.onload=function(){var o=i.getDrawImagePosition(s.width,s.height);t.drawImage(s,o.x,o.y,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.getDrawImagePosition=function(t,e){var o,n,i={x:-t/2,y:-e/2};switch(this.options.translatePlacement){case"top":i.x=-t/2,i.y=0;break;case"top-start":i.x=0,i.y=0;break;case"top-end":i.x=-t,i.y=0;break;case"bottom":i.x=-t/2,i.y=-e;break;case"bottom-start":i.x=0,i.y=-e;break;case"bottom-end":i.x=-t,i.y=-e;break;case"left":i.x=0,i.y=-e/2;break;case"right":i.x=-t,i.y=-e/2}return!r(null===(o=this.props)||void 0===o?void 0:o.translateX)&&(i.x=0),!r(null===(n=this.props)||void 0===n?void 0:n.translateY)&&(i.y=0),i},t.prototype.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var o;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(o=null==e?void 0:e.removedNodes)||void 0===o?void 0:o[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),c=function(t){function o(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}(o,t),o.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var o=new Image;o.src=e.url,o.onload=function(){var t,n=o.width,r=o.height,a=s.createCanvas(n,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(o,0,0,n,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,n,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},o}(s);t.BlindWatermark=c,t.Watermark=s}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watermark-js-plus",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "description": "watermark for the browser",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -44,20 +44,20 @@
     "dist"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^17.3.0",
+    "@commitlint/cli": "^17.4.0",
+    "@commitlint/config-conventional": "^17.4.0",
     "@element-plus/icons-vue": "^2.0.10",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-eslint": "^9.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "0.2.1",
-    "@rollup/plugin-typescript": "^10.0.1",
+    "@rollup/plugin-terser": "0.3.0",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@types/markdown-it": "^12.2.3",
     "@typescript-eslint/parser": "^5.48.0",
     "@vue/theme": "^1.3.0",
@@ -75,10 +75,10 @@
     "markdown-it": "^13.0.1",
     "rollup": "^3.9.1",
     "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-your-function": "^0.4.6",
+    "rollup-plugin-your-function": "^0.4.7",
     "terser": "^5.16.1",
     "typescript": "^4.9.4",
     "unplugin-element-plus": "^0.4.1",
-    "vitepress": "^1.0.0-alpha.34"
+    "vitepress": "^1.0.0-alpha.35"
   }
 }