watermark-js-plus 1.6.0 → 1.6.2

package/dist/es/src/core/watermark.js

@@ -0,0 +1,248 @@
+import { __awaiter, __assign, __generator } from '../../node_modules/tslib/tslib.es6.js';
+import { convertImage, generateAnimationStyle, isUndefined } from '../utils/index.js';
+import { initialOptions } from '../utils/initialization.js';
+import protection from '../utils/protection.js';
+import { renderLayout, generateBackgroundSize } from './layout/index.js';
+import { WatermarkCanvas } from './canvas.js';
+
+/**
+ * Watermark class
+ */
+var Watermark = /** @class */ (function () {
+    /**
+     * Watermark constructor
+     * @param args - watermark args
+     */
+    function Watermark(args) {
+        if (args === void 0) { args = {}; }
+        this.parentElement = document.body;
+        this.isCreating = false;
+        this.props = args;
+        this.options = __assign(__assign({}, initialOptions), args);
+        this.changeParentElement(this.options.parent);
+        this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
+        protection(this.options.monitorProtection);
+    }
+    /**
+     * Change watermark options
+     * @param args
+     * @param mode
+     * @param redraw
+     */
+    Watermark.prototype.changeOptions = function () {
+        return __awaiter(this, arguments, void 0, function (args, mode, redraw) {
+            if (args === void 0) { args = {}; }
+            if (mode === void 0) { mode = 'overwrite'; }
+            if (redraw === void 0) { redraw = true; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.initConfigData(args, mode);
+                        protection(this.options.monitorProtection);
+                        if (!redraw) return [3 /*break*/, 2];
+                        this.remove();
+                        return [4 /*yield*/, this.create()];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Creating a watermark.
+     */
+    Watermark.prototype.create = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
+            var _a, _b, _c, _d, _e, _f, _g;
+            return __generator(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        if (this.isCreating) {
+                            return [2 /*return*/];
+                        }
+                        this.isCreating = true;
+                        if (!this.validateUnique()) {
+                            this.isCreating = false;
+                            return [2 /*return*/];
+                        }
+                        if (!this.validateContent()) {
+                            this.isCreating = false;
+                            return [2 /*return*/];
+                        }
+                        firstDraw = isUndefined(this.watermarkDom);
+                        return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
+                    case 1:
+                        _h.sent();
+                        this.layoutCanvas = renderLayout(this.options, (_b = this.watermarkCanvas) === null || _b === void 0 ? void 0 : _b.getCanvas());
+                        image = convertImage(this.layoutCanvas);
+                        (_c = this.watermarkCanvas) === null || _c === void 0 ? void 0 : _c.clear();
+                        this.watermarkDom = document.createElement('div');
+                        watermarkInnerDom = document.createElement('div');
+                        this.watermarkDom.__WATERMARK__ = 'watermark';
+                        this.watermarkDom.__WATERMARK__INSTANCE__ = this;
+                        parentElementType = this.checkParentElementType();
+                        this.watermarkDom.style.cssText = "\n      z-index:".concat(this.options.zIndex, "!important;display:block!important;visibility:visible!important;transform:none!important;scale:none!important;\n      ").concat(parentElementType === 'custom' ? 'top:0!important;bottom:0!important;left:0!important;right:0!important;height:100%!important;pointer-events:none!important;position:absolute!important;' : 'position:relative!important;', "\n    ");
+                        backgroundSize = generateBackgroundSize(this.options);
+                        watermarkInnerDom.style.cssText = "\n      display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n      position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n      z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n      background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, ";\n      ").concat(generateAnimationStyle(this.options.movable, this.options.backgroundRepeat), "\n    ");
+                        this.watermarkDom.appendChild(watermarkInnerDom);
+                        this.parentElement.appendChild(this.watermarkDom);
+                        if (this.options.mutationObserve) {
+                            try {
+                                this.bindMutationObserve();
+                            }
+                            catch (_j) {
+                                (_e = (_d = this.options).onObserveError) === null || _e === void 0 ? void 0 : _e.call(_d);
+                            }
+                        }
+                        firstDraw && ((_g = (_f = this.options).onSuccess) === null || _g === void 0 ? void 0 : _g.call(_f));
+                        this.isCreating = false;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Delete this watermark.
+     */
+    Watermark.prototype.destroy = function () {
+        this.remove();
+        this.watermarkDom = undefined;
+    };
+    Watermark.prototype.check = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.parentElement.contains(this.watermarkDom)];
+            });
+        });
+    };
+    Watermark.prototype.remove = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        (_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();
+        (_f = (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.parentNode) === null || _f === void 0 ? void 0 : _f.removeChild(this.watermarkDom);
+        (_h = (_g = this.options).onDestroyed) === null || _h === void 0 ? void 0 : _h.call(_g);
+    };
+    Watermark.prototype.initConfigData = function (args, mode) {
+        var _this = this;
+        if (mode === void 0) { mode = 'overwrite'; }
+        if (mode === 'append') {
+            Object.keys(args).forEach(function (key) {
+                _this.props && (_this.props[key] = args[key]);
+            });
+        }
+        else {
+            this.props = args;
+        }
+        this.options = __assign(__assign({}, initialOptions), this.props);
+        this.changeParentElement(this.options.parent);
+        this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
+    };
+    Watermark.prototype.changeParentElement = function (parent) {
+        if (typeof parent === 'string') {
+            var parentElement = document.querySelector(parent);
+            parentElement && (this.parentElement = parentElement);
+        }
+        else {
+            this.parentElement = parent;
+        }
+        if (!this.parentElement) {
+            console.error('[WatermarkJsPlus]: please pass a valid parent element.');
+        }
+    };
+    Watermark.prototype.validateUnique = function () {
+        var result = true;
+        Array.from(this.parentElement.childNodes).forEach(function (node) {
+            if (!result) {
+                return;
+            }
+            if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
+                result = false;
+                // throw new Error('duplicate watermark error')
+            }
+        });
+        return result;
+    };
+    Watermark.prototype.validateContent = function () {
+        switch (this.options.contentType) {
+            case 'image':
+                return Object.hasOwnProperty.call(this.options, 'image');
+            case 'multi-line-text':
+            case 'rich-text':
+            case 'text':
+                return this.options.content.length > 0;
+        }
+    };
+    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) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(mutationsList.length > 0)) return [3 /*break*/, 2];
+                        this.remove();
+                        return [4 /*yield*/, this.create()];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); });
+        this.observer.observe(this.watermarkDom, {
+            attributes: true, // 属性的变动
+            childList: true, // 子节点的变动（指新增，删除或者更改）
+            subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
+            characterData: true, // 节点内容或节点文本的变动。
+        });
+        this.parentObserve = new MutationObserver(function (mutationsList) { return __awaiter(_this, void 0, void 0, function () {
+            var _i, mutationsList_1, item;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _i = 0, mutationsList_1 = mutationsList;
+                        _b.label = 1;
+                    case 1:
+                        if (!(_i < mutationsList_1.length)) return [3 /*break*/, 4];
+                        item = mutationsList_1[_i];
+                        if (!((item === null || item === void 0 ? void 0 : item.target) === this.watermarkDom ||
+                            ((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === this.watermarkDom ||
+                            (item.type === 'childList' &&
+                                item.target === this.parentElement &&
+                                item.target.lastChild !== this.watermarkDom))) return [3 /*break*/, 3];
+                        this.remove();
+                        return [4 /*yield*/, this.create()];
+                    case 2:
+                        _b.sent();
+                        _b.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); });
+        this.parentObserve.observe(this.parentElement, {
+            attributes: true, // 属性的变动
+            childList: true, // 子节点的变动（指新增，删除或者更改）
+            subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
+            characterData: true, // 节点内容或节点文本的变动。
+        });
+    };
+    return Watermark;
+}());
+
+export { Watermark };

package/dist/es/src/index.js

@@ -0,0 +1,3 @@
+export { Watermark } from './core/watermark.js';
+export { BlindWatermark } from './core/blind.js';
+export { ImageWatermark } from './core/image.js';

package/dist/es/src/utils/index.js

@@ -0,0 +1,199 @@
+import { __awaiter, __generator } from '../../node_modules/tslib/tslib.es6.js';
+
+var convertImage = function (canvas) {
+    return canvas.toDataURL('image/png', 1);
+};
+var isFunction = function (value) {
+    return typeof value === 'function';
+};
+var isUndefined = function (value) {
+    return value === undefined;
+};
+var isString = function (value) {
+    return typeof value === 'string';
+};
+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 = '';
+    var word = '';
+    for (var i = 0, len = text.length; i < len; i++) {
+        word = text.charAt(i);
+        if (word === '\n') {
+            result.push(str);
+            str = '';
+            continue;
+        }
+        str += word;
+        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) { return __awaiter(void 0, void 0, void 0, function () {
+    var svgElement, bodyElement, rect, rectWidth, rectHeight, width, height, foreignObjectElement;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                svgElement = createSVGElement('svg', {
+                    xmlns: 'http://www.w3.org/2000/svg',
+                });
+                bodyElement = document.createElement('div');
+                bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+                bodyElement.style.cssText = "\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font: ".concat(ctx.font, ";\n  color: ").concat(options.fontColor, ";\n");
+                bodyElement.innerHTML = "<div class='rich-text-content'>".concat(options.content, "</div>");
+                document.body.appendChild(bodyElement);
+                // convert all images to base64
+                return [4 /*yield*/, convertImgToBase64(bodyElement)];
+            case 1:
+                // convert all images to base64
+                _b.sent();
+                rect = (_a = bodyElement.querySelector('.rich-text-content')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                rectWidth = rect === null || rect === void 0 ? void 0 : rect.width;
+                rectHeight = rect === null || rect === void 0 ? void 0 : rect.height;
+                document.body.removeChild(bodyElement);
+                width = options.richTextWidth || rectWidth || options.width;
+                height = options.richTextHeight || rectHeight || options.height;
+                svgElement.setAttribute('width', width.toString());
+                svgElement.setAttribute('height', height.toString());
+                foreignObjectElement = createSVGElement('foreignObject', {
+                    width: width.toString(),
+                    height: height.toString(),
+                });
+                foreignObjectElement.appendChild(bodyElement);
+                svgElement.appendChild(foreignObjectElement);
+                return [2 /*return*/, {
+                        element: svgElement,
+                        width: width,
+                        height: height,
+                    }];
+        }
+    });
+}); };
+function convertImgToBase64(bodyElement) {
+    return __awaiter(this, void 0, void 0, function () {
+        var imgElements, _loop_1, _i, _a, img;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    imgElements = bodyElement.querySelectorAll('img');
+                    _loop_1 = function (img) {
+                        var src, response, blob_1, imgData, error_1;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    src = img.getAttribute('src');
+                                    if (!src) return [3 /*break*/, 6];
+                                    _c.label = 1;
+                                case 1:
+                                    _c.trys.push([1, 5, , 6]);
+                                    return [4 /*yield*/, fetch(src)];
+                                case 2:
+                                    response = _c.sent();
+                                    return [4 /*yield*/, response.blob()];
+                                case 3:
+                                    blob_1 = _c.sent();
+                                    return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                            var reader = new FileReader();
+                                            reader.onloadend = function () { return resolve(reader.result); };
+                                            reader.onerror = reject;
+                                            reader.readAsDataURL(blob_1);
+                                        })];
+                                case 4:
+                                    imgData = _c.sent();
+                                    if (isString(imgData)) {
+                                        img.setAttribute('src', imgData);
+                                    }
+                                    return [3 /*break*/, 6];
+                                case 5:
+                                    error_1 = _c.sent();
+                                    console.error("Error converting ".concat(src, " to base64:"), error_1);
+                                    return [3 /*break*/, 6];
+                                case 6: return [2 /*return*/];
+                            }
+                        });
+                    };
+                    _i = 0, _a = Array.from(imgElements);
+                    _b.label = 1;
+                case 1:
+                    if (!(_i < _a.length)) return [3 /*break*/, 4];
+                    img = _a[_i];
+                    return [5 /*yield**/, _loop_1(img)];
+                case 2:
+                    _b.sent();
+                    _b.label = 3;
+                case 3:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+var convertSVGToImage = function (svg) {
+    var richContent = svg.outerHTML
+        .replace(/<(img|br|input|hr|embed)(.*?)>/g, '<$1$2/>')
+        .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 generateMatrix = function (rows, columns, value) {
+    return Array.from({ length: rows }, function () { return new Array(columns).fill(value); });
+};
+var generateAnimationStyle = function (movable, backgroundRepeat) {
+    if (!movable) {
+        return '';
+    }
+    var horizontalDuration = Math.random() * (8 - 2) + 2;
+    var verticalDuration = Math.random() * (4 - 2) + 2;
+    switch (backgroundRepeat) {
+        case 'repeat':
+            return 'animation: 200s linear 0s infinite alternate watermark !important;';
+        case 'repeat-x':
+            return "animation: ".concat(horizontalDuration, "s ease-in 0s infinite alternate watermark-vertical !important;'");
+        case 'repeat-y':
+            return "animation: ".concat(verticalDuration, "s ease-out 0s infinite alternate watermark-horizontal !important;'");
+        case 'no-repeat':
+            return "animation: ".concat(horizontalDuration, "s ease-in 0s infinite alternate watermark-horizontal, ").concat(verticalDuration, "s ease-out 0s infinite alternate watermark-vertical !important;");
+        default:
+            return '';
+    }
+};
+
+export { convertImage, convertSVGToImage, createCustomContentSVG, createSVGElement, generateAnimationStyle, generateMatrix, getMultiLineData, getValue, isFunction, isString, isUndefined, loadImage };