feat: 水印性能优化

packages/fes-plugin-watermark/src/runtime/core.js

@@ -30,48 +30,11 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
     return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
 }
 
-let param = null; // 配置项
 let _wmMo = null; // MutationObserver
 let _wmTimer = null; // timestamp
 
-// 销毁水印
+function _createWatermark(param) {
-export function destroyWatermark() {
+    const {
-    // 监听器关闭
-    _wmMo && _wmMo.disconnect();
-    _wmMo = null;
-    _wmTimer && window.clearTimeout(_wmTimer);
-    _wmTimer = null;
-
-    // 删除水印元素
-    const __wm = document.querySelector('.__wm');
-    __wm && param && param.container.removeChild(__wm);
-    param = null;
-}
-
-// canvas 实现 watermark
-export function createWatermark({
-    container = document.body,
-    width = 300,
-    height = 300,
-    textAlign = 'center',
-    textBaseline = 'middle',
-    fontSize = '14px',
-    fontFamily = 'Microsoft Yahei',
-    fillStyle = 'rgba(184, 184, 184, 0.3)',
-    content = '请勿外传',
-    rotate = 25,
-    zIndex = 99999,
-    timestamp = 'YYYY-MM-DD HH:mm'
-} = {}) {
-    // eslint-disable-next-line no-undef
-    if (WATERMARK_DISABLED) {
-        return;
-    }
-
-    // 为避免多次调用 createWatermark 触发重复监听，这里先执行销毁水印操作
-    destroyWatermark();
-
-    param = {
         container,
         width,
         height,
@@ -84,7 +47,8 @@ export function createWatermark({
         rotate,
         zIndex,
         timestamp
-    };
+    } = param;
+
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', `${width}px`);
     canvas.setAttribute('height', `${height}px`);
@@ -107,8 +71,7 @@ export function createWatermark({
         parseInt(fontSize) + 5
     );
 
-    let __wm = document.querySelector('.__wm');
+    const watermarkDiv = document.createElement('div');
-    const watermarkDiv = __wm || document.createElement('div');
     const styleStr = `
     position: ${container === document.body ? 'fixed' : 'absolute'};
     user-select: none;
@@ -124,19 +87,17 @@ export function createWatermark({
     watermarkDiv.setAttribute('style', styleStr);
     watermarkDiv.classList.add('__wm');
 
-    if (!__wm) {
     container.insertBefore(watermarkDiv, container.firstChild);
-    }
 
     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
     if (MutationObserver) {
         _wmMo = new MutationObserver(() => {
-            __wm = document.querySelector('.__wm');
+            const __wm = document.querySelector('.__wm');
             if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                 // 避免一直触发
                 _wmMo.disconnect();
                 _wmMo = null;
-                createWatermark(param);
+                _createWatermark(param);
             }
         });
 
@@ -163,3 +124,55 @@ export function createWatermark({
         }, timeout);
     }
 }
+
+// 销毁水印
+export function destroyWatermark() {
+    // 监听器关闭
+    _wmMo && _wmMo.disconnect();
+    _wmMo = null;
+    _wmTimer && window.clearTimeout(_wmTimer);
+    _wmTimer = null;
+
+    // 删除水印元素
+    const __wm = document.querySelector('.__wm');
+    __wm && __wm.parentNode.removeChild(__wm);
+}
+
+// canvas 实现 watermark
+export function createWatermark({
+    container = document.body,
+    width = 300,
+    height = 300,
+    textAlign = 'center',
+    textBaseline = 'middle',
+    fontSize = '14px',
+    fontFamily = 'Microsoft Yahei',
+    fillStyle = 'rgba(184, 184, 184, 0.3)',
+    content = '请勿外传',
+    rotate = 25,
+    zIndex = 99999,
+    timestamp = 'YYYY-MM-DD HH:mm'
+} = {}) {
+    // eslint-disable-next-line no-undef
+    if (WATERMARK_DISABLED) {
+        return;
+    }
+
+    // 为避免多次调用 createWatermark 触发重复监听，这里先执行销毁水印操作
+    destroyWatermark();
+
+    _createWatermark({
+        container,
+        width,
+        height,
+        textAlign,
+        textBaseline,
+        fontSize,
+        fontFamily,
+        fillStyle,
+        content,
+        rotate,
+        zIndex,
+        timestamp
+    });
+}