watermark-js-plus 0.0.4 → 0.2.0

package/dist/watermark.umd.js

@@ -0,0 +1,506 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.watermark = {}));
+})(this, (function (exports) { 'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+
+    var convertImage = function (canvas) {
+        return canvas.toDataURL('image/png', 1);
+    };
+    var isFunction = function (value) {
+        return typeof value === 'function';
+    };
+    var createSVGElement = function (tagName, attrs, namespaceURI) {
+        if (attrs === void 0) { attrs = {}; }
+        if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
+        var element = document.createElementNS(namespaceURI, tagName);
+        for (var attr in attrs) {
+            element.setAttribute(attr, attrs[attr]);
+        }
+        return element;
+    };
+    var getMultiLineData = function (ctx, text, maxWidth) {
+        var result = [];
+        var str = '';
+        for (var i = 0, len = text.length; i < len; i++) {
+            str += text.charAt(i);
+            if (ctx.measureText(str).width > maxWidth) {
+                result.push(str.substring(0, str.length - 1));
+                str = '';
+                i--;
+            }
+        }
+        result.push(str);
+        return result;
+    };
+    var createCustomContentSVG = function (ctx, options) {
+        var svgElement = createSVGElement('svg', {
+            xmlns: 'http://www.w3.org/2000/svg'
+        });
+        var 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;
+        foreignObjectElement.appendChild(bodyElement);
+        svgElement.appendChild(foreignObjectElement);
+        return svgElement;
+    };
+    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 ContentTypeEnum;
+    (function (ContentTypeEnum) {
+        ContentTypeEnum["text"] = "text";
+        ContentTypeEnum["image"] = "image";
+        ContentTypeEnum["multiLineText"] = "multi-line-text";
+        ContentTypeEnum["richText"] = "rich-text";
+    })(ContentTypeEnum || (ContentTypeEnum = {}));
+    var TextAlignEnum;
+    (function (TextAlignEnum) {
+        TextAlignEnum["center"] = "center";
+        TextAlignEnum["left"] = "left";
+        TextAlignEnum["right"] = "right";
+    })(TextAlignEnum || (TextAlignEnum = {}));
+    var TextBaselineEnum;
+    (function (TextBaselineEnum) {
+        TextBaselineEnum["top"] = "top";
+        TextBaselineEnum["bottom"] = "bottom";
+        TextBaselineEnum["middle"] = "middle";
+    })(TextBaselineEnum || (TextBaselineEnum = {}));
+    var CreateWatermarkModeEnum;
+    (function (CreateWatermarkModeEnum) {
+        CreateWatermarkModeEnum["default"] = "default";
+        CreateWatermarkModeEnum["blind"] = "blind";
+    })(CreateWatermarkModeEnum || (CreateWatermarkModeEnum = {}));
+    var DecodeBlindWatermarkModeEnum;
+    (function (DecodeBlindWatermarkModeEnum) {
+        DecodeBlindWatermarkModeEnum["canvas"] = "canvas";
+        DecodeBlindWatermarkModeEnum["html"] = "html";
+        DecodeBlindWatermarkModeEnum["svg"] = "svg";
+    })(DecodeBlindWatermarkModeEnum || (DecodeBlindWatermarkModeEnum = {}));
+
+    /**
+     * Watermark class
+     */
+    var Watermark = /** @class */ (function () {
+        /**
+         * Watermark constructor
+         * @param props - watermark options
+         */
+        function Watermark(props) {
+            if (props === void 0) { props = {}; }
+            var _a;
+            this.parentElement = document.body;
+            this.options = Object.assign({
+                width: 300,
+                height: 300,
+                rotate: 45,
+                contentType: ContentTypeEnum.text,
+                content: 'hello watermark-js-plus',
+                imageWidth: 0,
+                imageHeight: 0,
+                lineHeight: 30,
+                zIndex: 10000,
+                backgroundPosition: '0 0, 0 0',
+                backgroundRepeat: 'repeat',
+                fontSize: 20,
+                fontFamily: 'sans-serif',
+                textAlign: TextAlignEnum.center,
+                textBaseline: TextBaselineEnum.middle,
+                fontColor: '#000',
+                globalAlpha: 0.5,
+                fontWeight: 'normal',
+                mode: CreateWatermarkModeEnum.default,
+                mutationObserve: true,
+                unique: true,
+                parent: 'body',
+                onSuccess: function () { },
+                onBeforeDestroy: function () { },
+                onDestroyed: function () { }
+            }, props);
+            if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
+                this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
+            }
+            this.changeParentElement(this.options.parent);
+        }
+        /**
+         * Create an HD canvas.
+         * @param width - width of canvas
+         * @param height - height of canvas
+         */
+        Watermark.createCanvas = function (width, height) {
+            var _a;
+            var ratio = window.devicePixelRatio || 1;
+            var canvas = document.createElement('canvas');
+            canvas.width = width * ratio; // actual rendered pixel
+            canvas.height = height * ratio; // actual rendered pixel
+            canvas.style.width = "".concat(width, "px"); // control display size
+            canvas.style.height = "".concat(height, "px"); // control display size
+            (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
+            return canvas;
+        };
+        Watermark.prototype.changeParentElement = function (parent) {
+            if (typeof parent === 'string') {
+                var parentElement = document.querySelector(parent);
+                parentElement && (this.parentElement = parentElement);
+            }
+            else {
+                this.parentElement = parent;
+            }
+        };
+        /**
+         * Creating a watermark.
+         */
+        Watermark.prototype.create = function () {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var canvas, image, watermarkInnerDom, parentElementType;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!this.validateUnique()) {
+                                return [2 /*return*/];
+                            }
+                            if (!this.validateContent()) {
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, this.draw()];
+                        case 1:
+                            canvas = _c.sent();
+                            image = convertImage(canvas);
+                            this.watermarkDom = document.createElement('div');
+                            watermarkInnerDom = document.createElement('div');
+                            this.watermarkDom.__WATERMARK__ = 'watermark';
+                            this.watermarkDom.__WATERMARK__INSTANCE__ = this;
+                            parentElementType = this.checkParentElementType();
+                            this.watermarkDom.style.cssText = "\n      z-index: ".concat(this.options.zIndex, ";\n      ").concat(parentElementType === 'custom' ? 'top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute' : 'position: relative', "\n    ");
+                            watermarkInnerDom.style.cssText = "\n      position: ".concat(parentElementType === 'root' ? '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(image, ");\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(watermarkInnerDom);
+                            this.parentElement.appendChild(this.watermarkDom);
+                            if (this.options.mutationObserve) {
+                                this.bindMutationObserve();
+                            }
+                            (_b = (_a = this.options).onSuccess) === null || _b === void 0 ? void 0 : _b.call(_a);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Deleting this watermark.
+         */
+        Watermark.prototype.destroy = function () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
+            (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
+            (_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.validateUnique = function () {
+            var result = true;
+            if (this.options.unique) {
+                this.parentElement.childNodes.forEach(function (node) {
+                    if (!result) {
+                        return;
+                    }
+                    if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
+                        result = false;
+                        // throw new Error('duplicate watermark error')
+                    }
+                });
+            }
+            return result;
+        };
+        Watermark.prototype.validateContent = function () {
+            switch (this.options.contentType) {
+                case ContentTypeEnum.image:
+                    return Object.hasOwnProperty.call(this.options, 'image');
+                case ContentTypeEnum.multiLineText:
+                case ContentTypeEnum.richText:
+                case ContentTypeEnum.text:
+                    return this.options.content.length > 0;
+            }
+            return false;
+        };
+        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');
+            if (ctx === null) {
+                throw new Error('get context error');
+            }
+            ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
+            ctx.textAlign = this.options.textAlign;
+            ctx.textBaseline = this.options.textBaseline;
+            ctx.fillStyle = this.options.fontColor;
+            ctx.globalAlpha = this.options.globalAlpha;
+            return new Promise(function (resolve) {
+                switch (_this.options.contentType) {
+                    case ContentTypeEnum.text:
+                        _this.drawText(ctx, resolve);
+                        break;
+                    case ContentTypeEnum.image:
+                        _this.drawImage(ctx, resolve);
+                        break;
+                    case ContentTypeEnum.multiLineText:
+                        _this.drawMultiLineText(ctx, resolve);
+                        break;
+                    case ContentTypeEnum.richText:
+                        _this.drawRichText(ctx, resolve);
+                        break;
+                }
+            });
+        };
+        Watermark.prototype.drawText = function (ctx, resolve) {
+            ctx.translate(this.options.width / 2, this.options.height / 2);
+            ctx.rotate(this.options.rotate);
+            ctx.fillText(this.options.content, 0, 0);
+            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 () {
+                ctx.translate(_this.options.width / 2, _this.options.height / 2);
+                ctx.rotate(_this.options.rotate);
+                var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
+                ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
+                resolve(ctx.canvas);
+            };
+        };
+        Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
+            var _this = this;
+            // image.width = this.options.width
+            // image.height = this.options.height
+            // const element = createCustomContentSvg(context, this.options)
+            // image.src = convertSVGToImage(element)
+            // image.onload = () => {
+            //   context.translate(this.options.width / 2, this.options.height / 2)
+            //   context.rotate(this.options.rotate)
+            //   context.drawImage(
+            //     image,
+            //     -this.options.width / 2,
+            //     -this.options.height / 2,
+            //     context.canvas.width,
+            //     context.canvas.height
+            //   )
+            //   resolve(canvas)
+            // }
+            var lines = getMultiLineData(ctx, this.options.content, this.options.width);
+            ctx.translate(this.options.width / 2, this.options.height / 2);
+            ctx.rotate(this.options.rotate);
+            var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
+            lines.forEach(function (txt, index) {
+                ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
+            });
+            resolve(ctx.canvas);
+        };
+        Watermark.prototype.drawRichText = function (ctx, resolve) {
+            var _this = this;
+            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.onload = function () {
+                ctx.translate(_this.options.width / 2, _this.options.height / 2);
+                ctx.rotate(_this.options.rotate);
+                ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
+                resolve(ctx.canvas);
+            };
+        };
+        Watermark.prototype.getImageRect = function (image) {
+            var rect = { width: this.options.imageWidth, height: this.options.imageHeight };
+            switch (true) {
+                case rect.width !== 0 && rect.height === 0:
+                    rect.height = rect.width * image.height / image.width;
+                    break;
+                case rect.width === 0 && rect.height !== 0:
+                    rect.width = rect.height * image.width / image.height;
+                    break;
+                case rect.width === 0 && rect.height === 0:
+                    rect.width = image.width;
+                    rect.height = image.height;
+                    break;
+            }
+            return rect;
+        };
+        Watermark.prototype.checkParentElementType = function () {
+            if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
+                return 'root';
+            }
+            return 'custom';
+        };
+        Watermark.prototype.bindMutationObserve = function () {
+            var _this = this;
+            if (!this.watermarkDom) {
+                return;
+            }
+            this.observer = new MutationObserver(function (mutationsList) {
+                if (mutationsList.length > 0) {
+                    _this.destroy();
+                    _this.create();
+                }
+            });
+            this.observer.observe(this.watermarkDom, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                characterData: true // 节点内容或节点文本的变动。
+            });
+            this.parentObserve = new MutationObserver(function (mutationsList) {
+                mutationsList.forEach(function (item) {
+                    var _a;
+                    if ((item === null || item === void 0 ? void 0 : item.target) === _this.watermarkDom || ((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === _this.watermarkDom) {
+                        _this.destroy();
+                        _this.create();
+                    }
+                });
+            });
+            this.parentObserve.observe(this.parentElement, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                characterData: true // 节点内容或节点文本的变动。
+            });
+        };
+        return Watermark;
+    }());
+
+    /**
+     * BlindWatermark class
+     */
+    var BlindWatermark = /** @class */ (function (_super) {
+        __extends(BlindWatermark, _super);
+        /**
+         * BlindWatermark constructor
+         * @param props - blind watermark options
+         */
+        function BlindWatermark(props) {
+            if (props === void 0) { props = {}; }
+            props.globalAlpha = 0.005;
+            props.mode = CreateWatermarkModeEnum.blind;
+            return _super.call(this, props) || this;
+        }
+        /**
+         * Decode blind watermark.
+         * @param props - decode options
+         */
+        BlindWatermark.decode = function (props) {
+            var options = Object.assign({
+                url: '',
+                fillColor: '#000',
+                compositeOperation: 'color-burn',
+                mode: DecodeBlindWatermarkModeEnum.canvas
+            }, props);
+            if (!options.url) {
+                return;
+            }
+            if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
+                var img_1 = new Image();
+                img_1.src = options.url;
+                img_1.onload = function () {
+                    var _a;
+                    var width = img_1.width, height = img_1.height;
+                    var canvas = Watermark.createCanvas(width, height);
+                    var ctx = canvas.getContext('2d');
+                    if (ctx === null) {
+                        throw new Error('get context error');
+                    }
+                    ctx.drawImage(img_1, 0, 0, width, height);
+                    ctx.globalCompositeOperation = options.compositeOperation;
+                    ctx.fillStyle = options.fillColor;
+                    ctx.fillRect(0, 0, width, height);
+                    var resultImage = convertImage(canvas);
+                    if (options.onSuccess && isFunction(options.onSuccess)) {
+                        (_a = options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options, resultImage);
+                    }
+                };
+            }
+        };
+        return BlindWatermark;
+    }(Watermark));
+
+    exports.BlindWatermark = BlindWatermark;
+    exports.Watermark = Watermark;
+
+}));

package/dist/watermark.umd.min.js

@@ -0,0 +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,r,a,s,c,h=function(t){return t.toDataURL("image/png",1)},l=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};!function(t){t.text="text",t.image="image",t.multiLineText="multi-line-text",t.richText="rich-text"}(i||(i={})),function(t){t.center="center",t.left="left",t.right="right"}(r||(r={})),function(t){t.top="top",t.bottom="bottom",t.middle="middle"}(a||(a={})),function(t){t.default="default",t.blind="blind"}(s||(s={})),function(t){t.canvas="canvas",t.html="html",t.svg="svg"}(c||(c={}));var u=function(){function t(t){var e;void 0===t&&(t={}),this.parentElement=document.body,this.options=Object.assign({width:300,height:300,rotate:45,contentType:i.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",textAlign:r.center,textBaseline:a.middle,fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:s.default,mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),(null===(e=this.options)||void 0===e?void 0:e.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180)),this.changeParentElement(this.options.parent)}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,i,r,a;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(),i=h(n),this.watermarkDom=document.createElement("div"),r=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,a=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===a?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n    "),r.style.cssText="\n      position: ".concat("root"===a?"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(i,");\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(r),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.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 i.image:return Object.hasOwnProperty.call(this.options,"image");case i.multiLineText:case i.richText:case i.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),n.textAlign=this.options.textAlign,n.textBaseline=this.options.textBaseline,n.fillStyle=this.options.fontColor,n.globalAlpha=this.options.globalAlpha,new Promise((function(t){switch(e.options.contentType){case i.text:e.drawText(n,t);break;case i.image:e.drawImage(n,t);break;case i.multiLineText:e.drawMultiLineText(n,t);break;case i.richText:e.drawRichText(n,t)}}))},t.prototype.drawText=function(t,e){t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate),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(){t.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate);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);t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate);var 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=l("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=l("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.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate),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}(),p=function(t){function n(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode=s.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:c.canvas},t);if(e.url&&e.mode===c.canvas){var n=new Image;n.src=e.url,n.onload=function(){var t,o=n.width,i=n.height,r=u.createCanvas(o,i),a=r.getContext("2d");if(null===a)throw new Error("get context error");a.drawImage(n,0,0,o,i),a.globalCompositeOperation=e.compositeOperation,a.fillStyle=e.fillColor,a.fillRect(0,0,o,i);var s=h(r);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,s))}}},n}(u);t.BlindWatermark=p,t.Watermark=u}));

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "watermark-js-plus",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "description": "watermark for the browser",
-  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky install",
     "lint": "npx eslint \"src/*.{ts,js}\"",
     "dev": "concurrently \"npm run src:dev\" \"npm run docs:dev\"",
-    "src:dev": "rollup -c --watch --bundleConfigAsCjs",
-    "build": "rollup -c --bundleConfigAsCjs --environment NODE_ENV:production",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 -n changelog-option.cjs",
+    "src:dev": "rollup -c --watch",
+    "build": "rollup -c --environment NODE_ENV:production",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 -n changelog-option.js",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
@@ -36,21 +35,16 @@
     "防删除水印",
     "解密水印"
   ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.js"
-    }
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.js",
+  "main": "dist/watermark.esm.js",
+  "module": "dist/watermark.esm.js",
+  "browser": "dist/watermark.umd.min.js",
+  "unpkg": "",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.7",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
@@ -58,33 +52,33 @@
     "@commitlint/config-conventional": "^17.3.0",
     "@element-plus/icons-vue": "^2.0.10",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.4",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-eslint": "^9.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-terser": "^0.2.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "0.2.1",
     "@rollup/plugin-typescript": "^10.0.1",
     "@types/markdown-it": "^12.2.3",
-    "@typescript-eslint/parser": "^5.45.1",
+    "@typescript-eslint/parser": "^5.48.0",
     "@vue/theme": "^1.3.0",
     "concurrently": "^7.6.0",
     "conventional-changelog-angular": "^5.0.13",
     "conventional-changelog-cli": "^2.2.2",
-    "core-js": "^3.26.1",
-    "element-plus": "^2.2.26",
-    "eslint": "^8.29.0",
+    "core-js": "^3.27.1",
+    "element-plus": "^2.2.28",
+    "eslint": "^8.31.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-semistandard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "husky": "^8.0.2",
+    "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "markdown-it": "^13.0.1",
-    "rollup": "^3.7.0",
+    "rollup": "^3.9.1",
     "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-your-function": "^0.4.3",
+    "rollup-plugin-your-function": "^0.4.6",
     "terser": "^5.16.1",
     "typescript": "^4.9.4",
     "unplugin-element-plus": "^0.4.1",
-    "vitepress": "^1.0.0-alpha.30"
+    "vitepress": "^1.0.0-alpha.34"
   }
 }