From 991217ba8bf938f8bceabdad612735f31e3b4851 Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 10 May 2022 16:56:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B0=B4=E5=8D=B0=E6=80=A7=E8=83=BD?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fes-plugin-watermark/src/runtime/core.js | 107 ++++++++++-------- 1 file changed, 60 insertions(+), 47 deletions(-) diff --git a/packages/fes-plugin-watermark/src/runtime/core.js b/packages/fes-plugin-watermark/src/runtime/core.js index b4e4d1bc..87381690 100644 --- a/packages/fes-plugin-watermark/src/runtime/core.js +++ b/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 -// 销毁水印 -export function destroyWatermark() { - // 监听器关闭 - _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 = { +function _createWatermark(param) { + const { 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 = __wm || document.createElement('div'); + const watermarkDiv = 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); - } + 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 + }); +}