watermark-js-plus 0.6.0 → 0.8.0

package/dist/watermark.esm.js

@@ -45,7 +45,7 @@ function __generator(thisArg, body) {
     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]) {
@@ -128,6 +128,301 @@ 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: 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
@@ -135,43 +430,16 @@ var convertSVGToImage = function (svg) {
 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.
@@ -189,14 +457,10 @@ var Watermark = /** @class */ (function () {
         (_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.
@@ -218,6 +482,7 @@ var Watermark = /** @class */ (function () {
                     case 1:
                         canvas = _c.sent();
                         image = convertImage(canvas);
+                        this.clearCanvas();
                         this.watermarkDom = document.createElement('div');
                         watermarkInnerDom = document.createElement('div');
                         this.watermarkDom.__WATERMARK__ = 'watermark';
@@ -237,7 +502,7 @@ var Watermark = /** @class */ (function () {
         });
     };
     /**
-     * Deleting this watermark.
+     * Delete this watermark.
      */
     Watermark.prototype.destroy = function () {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -247,73 +512,31 @@ var Watermark = /** @class */ (function () {
         (_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;
@@ -343,13 +566,13 @@ var Watermark = /** @class */ (function () {
     };
     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) {
@@ -370,26 +593,70 @@ var Watermark = /** @class */ (function () {
         });
     };
     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') {
@@ -402,21 +669,18 @@ var Watermark = /** @class */ (function () {
             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;
@@ -436,23 +700,8 @@ var Watermark = /** @class */ (function () {
         //   )
         //   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 });
         });
@@ -461,18 +710,14 @@ var Watermark = /** @class */ (function () {
     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;
@@ -570,6 +815,15 @@ var Watermark = /** @class */ (function () {
             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;
 }());