blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

fix: 修复其他dom变化也会导致水印重新渲染的问题 (#175)

Browse Source
This commit is contained in:
听海 2023-03-13 20:27:47 +08:00 committed by GitHub
parent f254158b31
commit 7c432badf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
packages/fes-plugin-watermark/src/runtime/core.js
View File

@ -30,26 +30,30 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, (str) => String(map[str]));
}
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 _wmContainerMo = null; // MutationObserver
let _wmMo = null; // MutationObserver
let _wmTimer = null; // timestamp
// 销毁水印
export function destroyWatermark() {
// 监听器关闭
_wmMo?.disconnect();
_wmMo = null;
_wmContainerMo?.disconnect();
_wmContainerMo = null;
// 清除timer
if (_wmTimer) {
window.clearTimeout(_wmTimer);
_wmTimer = null;
}
// 删除水印元素
let __wm = document.querySelector('.__wm');
__wm?.parentNode?.removeChild(__wm);
__wm = null;
}
function _createWatermark(param) {
const { content, container, width, height, textAlign, textBaseline, fontSize, fontFamily, fillStyle, rotate, zIndex, timestamp } = param;
const { content, container, width, height, textAlign, textBaseline, fontSize, fontFamily, fillStyle, rotate, zIndex, timestamp, watch } = param;
const canvas = document.createElement('canvas');
canvas.setAttribute('width', `${width}px`);
@ -65,8 +69,7 @@ function _createWatermark(param) {
ctx.fillText(`${content}`, 0, 0);
timestamp && ctx.fillText(`${timeFormat(new Date(), timestamp)}`, 0, parseInt(fontSize) + 5);
let __wm = document.querySelector('.__wm');
const watermarkDiv = __wm || document.createElement('div');
const watermarkDiv = document.querySelector('.__wm') || document.createElement('div');
const styleStr = `
position: ${container === document.body ? 'fixed' : 'absolute'};
user-select: none;
@ -82,27 +85,34 @@ function _createWatermark(param) {
watermarkDiv.setAttribute('style', styleStr);
watermarkDiv.classList.add('__wm');
if (!__wm) {
if (container.firstChild) {
container.insertBefore(watermarkDiv, container.firstChild);
} else {
container.appendChild(watermarkDiv);
}
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
_wmMo = new MutationObserver(() => {
__wm = document.querySelector('.__wm');
if (watch && MutationObserver) {
_wmContainerMo = new MutationObserver(() => {
const __wm = container.querySelector('.__wm');
if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
// 避免一直触发
_wmMo.disconnect();
_wmMo = null;
destroyWatermark();
_createWatermark(param);
}
});
_wmMo.observe(container, {
attributes: true,
subtree: true,
_wmContainerMo.observe(container, {
childList: true,
});
_wmMo = new MutationObserver(() => {
destroyWatermark();
_createWatermark(param);
});
_wmMo.observe(watermarkDiv, {
attributes: true,
});
}
if (timestamp) {
@ -116,25 +126,12 @@ function _createWatermark(param) {
}
_wmTimer = window.setTimeout(() => {
// 触发 MutationObserver
watermarkDiv.style.bottom = '0';
destroyWatermark();
_createWatermark(param);
}, 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
@ -142,6 +139,22 @@ export function createWatermark(option) {
return;
}
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',
watch: true,
};
// 为避免多次调用 createWatermark 触发重复监听，这里先执行销毁水印操作
destroyWatermark();