watermark-js-plus 0.6.0 → 0.8.0

package/dist/watermark.umd.js

@@ -51,7 +51,7 @@
         function verb(n) { return function (v) { return step([n, v]); }; }
         function step(op) {
             if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
+            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]) {
@@ -134,6 +134,301 @@
         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: 10000,
+        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 () { }
+    };
+    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;
+    };
 
     /**
      * Watermark class
@@ -141,43 +436,16 @@
     var Watermark = /** @class */ (function () {
         /**
          * Watermark constructor
-         * @param props - watermark options
+         * @param args - watermark args
          */
-        function Watermark(props) {
-            if (props === void 0) { props = {}; }
+        function Watermark(args) {
+            if (args === void 0) { args = {}; }
             this.parentElement = document.body;
-            this.props = props;
-            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: 10000,
-                backgroundPosition: '0 0, 0 0',
-                backgroundRepeat: 'repeat',
-                fontSize: 20,
-                fontFamily: 'sans-serif',
-                fontStyle: '',
-                fontColor: '#000',
-                fontWeight: 'normal',
-                filter: 'none',
-                globalAlpha: 0.5,
-                mode: 'default',
-                mutationObserve: true,
-                unique: true,
-                parent: 'body',
-                onSuccess: function () { },
-                onBeforeDestroy: function () { },
-                onDestroyed: function () { }
-            }, props);
+            this.props = args;
+            this.options = Object.assign({}, initialOptions, args);
             this.changeParentElement(this.options.parent);
-            this.initializeOptions();
+            this.canvas = Watermark.createCanvas(this.options.width, this.options.height);
+            this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
         }
         /**
          * Create an HD canvas.
@@ -195,14 +463,10 @@
             (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
             return 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.changeOptions = function (args, mode) {
+            if (args === void 0) { args = {}; }
+            if (mode === void 0) { mode = 'overwrite'; }
+            this.initConfigData(args, mode);
         };
         /**
          * Creating a watermark.
@@ -224,6 +488,7 @@
                         case 1:
                             canvas = _c.sent();
                             image = convertImage(canvas);
+                            this.clearCanvas();
                             this.watermarkDom = document.createElement('div');
                             watermarkInnerDom = document.createElement('div');
                             this.watermarkDom.__WATERMARK__ = 'watermark';
@@ -243,7 +508,7 @@
             });
         };
         /**
-         * Deleting this watermark.
+         * Delete this watermark.
          */
         Watermark.prototype.destroy = function () {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -253,73 +518,31 @@
             (_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.initializeOptions = function () {
-            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);
+        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);
             }
-            var translateX;
-            var translateY;
-            var textBaseline = 'middle';
-            var textAlign = 'center';
-            switch (this.options.translatePlacement) {
-                case 'top':
-                    translateX = this.options.width / 2;
-                    translateY = 0;
-                    textBaseline = 'top';
-                    break;
-                case 'top-start':
-                    translateX = 0;
-                    translateY = 0;
-                    textBaseline = 'top';
-                    textAlign = 'start';
-                    break;
-                case 'top-end':
-                    translateX = this.options.width;
-                    translateY = 0;
-                    textBaseline = 'top';
-                    textAlign = 'end';
-                    break;
-                case 'bottom':
-                    translateX = this.options.width / 2;
-                    translateY = this.options.height;
-                    textBaseline = 'bottom';
-                    break;
-                case 'bottom-start':
-                    translateX = 0;
-                    translateY = this.options.height;
-                    textBaseline = 'bottom';
-                    textAlign = 'start';
-                    break;
-                case 'bottom-end':
-                    translateX = this.options.width;
-                    translateY = this.options.height;
-                    textBaseline = 'bottom';
-                    textAlign = 'end';
-                    break;
-                case 'left':
-                    translateX = 0;
-                    translateY = this.options.height / 2;
-                    textAlign = 'start';
-                    break;
-                case 'right':
-                    translateX = this.options.width;
-                    translateY = this.options.height / 2;
-                    textAlign = 'end';
-                    break;
-                case 'middle':
-                    translateX = this.options.width / 2;
-                    translateY = this.options.height / 2;
-                    break;
+            else {
+                Object.keys(args).forEach(function (key) {
+                    _this.options[key] = args[key];
+                });
             }
-            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';
+            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;
             }
-            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;
@@ -349,13 +572,13 @@
         };
         Watermark.prototype.draw = function () {
             var _this = this;
-            var canvas = Watermark.createCanvas(this.options.width, this.options.height);
-            // document.body?.appendChild(canvas)
-            var ctx = canvas.getContext('2d');
+            // const canvas = Watermark.createCanvas(this.options.width, this.options.height)
+            var ctx = this.canvas.getContext('2d');
             if (ctx === null) {
                 throw new Error('get context error');
             }
             this.setStyle(ctx);
+            ctx.save();
             ctx.translate(this.options.translateX, this.options.translateY);
             ctx.rotate(this.options.rotate);
             return new Promise(function (resolve) {
@@ -376,26 +599,70 @@
             });
         };
         Watermark.prototype.setStyle = function (ctx) {
+            var _a;
             var propName = 'fillStyle';
             if (this.options.textType === 'stroke') {
                 propName = 'strokeStyle';
             }
-            ctx[propName] && (ctx[propName] = this.options.fontColor);
-            ctx.font = "".concat(this.options.fontStyle, " ").concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
-            ctx.filter = this.options.filter;
+            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 = this.options.shadowStyle.shadowBlur || 0;
-                ctx.shadowColor = this.options.shadowStyle.shadowColor || '#00000000';
-                ctx.shadowOffsetX = this.options.shadowStyle.shadowOffsetX || 0;
-                ctx.shadowOffsetY = this.options.shadowStyle.shadowOffsetY || 0;
+                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') {
@@ -408,21 +675,18 @@
                 text: this.options.content,
                 x: 0,
                 y: 0,
-                maxWidth: this.options.textRowMaxWidth
+                maxWidth: this.options.textRowMaxWidth || this.options.width
             });
             resolve(ctx.canvas);
         };
         Watermark.prototype.drawImage = function (ctx, resolve) {
             var _this = this;
-            var image = new Image();
-            image.setAttribute('crossOrigin', 'Anonymous');
-            image.src = this.options.image;
-            image.onload = function () {
+            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;
@@ -442,23 +706,8 @@
             //   )
             //   resolve(canvas)
             // }
-            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;
-            }
+            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 });
             });
@@ -467,18 +716,14 @@
         Watermark.prototype.drawRichText = function (ctx, resolve) {
             var _this = this;
             var obj = createCustomContentSVG(ctx, this.options);
-            var image = new Image();
-            image.width = obj.width;
-            image.height = obj.height;
-            image.src = convertSVGToImage(obj.element);
-            image.onload = function () {
+            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, height: this.options.imageHeight };
+            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;
@@ -576,6 +821,15 @@
                 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;
     }());