diff --git a/docs/reference/plugin/plugins/watermark.md b/docs/reference/plugin/plugins/watermark.md index f51b70e6..5708c11e 100644 --- a/docs/reference/plugin/plugins/watermark.md +++ b/docs/reference/plugin/plugins/watermark.md @@ -43,16 +43,18 @@ export default { ### createWatermark 创建水印功能,通过 `@fesjs/fes` 导入 API: + ```js -import { createWatermark } from '@fesjs/fes' +import { createWatermark, destroyWatermark } from '@fesjs/fes'; -createWatermark({ content: '我是水印' }); +createWatermark({ content: '我是水印' }); // 生成水印 +destroyWatermark(); // 销毁水印 ``` - 默认参数是: ```js { + content = '请勿外传', container = document.body, width = 300, height = 300, @@ -61,7 +63,6 @@ createWatermark({ content: '我是水印' }); fontSize = '14px', fontFamily = 'Microsoft Yahei', fillStyle = 'rgba(184, 184, 184, 0.3)', - content = '请勿外传', rotate = 25, zIndex = 99999, timestamp = 'YYYY-MM-DD HH:mm' diff --git a/packages/fes-plugin-watermark/src/index.js b/packages/fes-plugin-watermark/src/index.js index a0f96ba4..02847be7 100644 --- a/packages/fes-plugin-watermark/src/index.js +++ b/packages/fes-plugin-watermark/src/index.js @@ -38,7 +38,7 @@ export default (api) => { api.addPluginExports(() => [ { - specifiers: ['createWatermark'], + specifiers: ['createWatermark', 'destroyWatermark'], source: absoluteFilePath } ]); diff --git a/packages/fes-plugin-watermark/src/runtime/core.js b/packages/fes-plugin-watermark/src/runtime/core.js index fb3a3460..38420c86 100644 --- a/packages/fes-plugin-watermark/src/runtime/core.js +++ b/packages/fes-plugin-watermark/src/runtime/core.js @@ -30,26 +30,27 @@ function timeFormat(date, format = 'YYYY-MM-DD') { return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str])); } -// 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; - } - const param = { +const defaultOption = { + content: '请勿外传', + container: document.body, + width: 300, + height: 300, + textAlign: 'center', + textBaseline: 'middle', + fontSize: '14px', + fontFamily: 'Microsoft Yahei', + fillStyle: 'rgba(184, 184, 184, 0.3)', + rotate: 25, + zIndex: 99999, + timestamp: 'YYYY-MM-DD HH:mm' +}; + +let _wmMo = null; // MutationObserver +let _wmTimer = null; // timestamp + +function _createWatermark(param) { + const { + content, container, width, height, @@ -58,11 +59,11 @@ export function createWatermark({ fontSize, fontFamily, fillStyle, - content, rotate, zIndex, timestamp - }; + } = param; + const canvas = document.createElement('canvas'); canvas.setAttribute('width', `${width}px`); canvas.setAttribute('height', `${height}px`); @@ -108,17 +109,17 @@ export function createWatermark({ const MutationObserver = window.MutationObserver || window.WebKitMutationObserver; if (MutationObserver) { - let mo = new MutationObserver(() => { + _wmMo = new MutationObserver(() => { __wm = document.querySelector('.__wm'); if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) { // 避免一直触发 - mo.disconnect(); - mo = null; - createWatermark(param); + _wmMo.disconnect(); + _wmMo = null; + _createWatermark(param); } }); - mo.observe(container, { + _wmMo.observe(container, { attributes: true, subtree: true, childList: true @@ -135,9 +136,38 @@ export function createWatermark({ timeout = 1000 * 60 * 60; } - setTimeout(() => { - // 触发MutationObserver + _wmTimer = window.setTimeout(() => { + // 触发 MutationObserver watermarkDiv.style.bottom = '0'; }, 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(option) { + // eslint-disable-next-line no-undef + if (WATERMARK_DISABLED) { + return; + } + + // 为避免多次调用 createWatermark 触发重复监听,这里先执行销毁水印操作 + destroyWatermark(); + + _createWatermark({ + ...defaultOption, + ...option + }); +}