blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-10-15 03:32:11 +08:00
Code Issues Projects Releases Wiki Activity

feat: 水印性能优化

Browse Source
This commit is contained in:
ocean-gao 2022-05-10 16:56:36 +08:00
parent 6b90acb51c
commit 991217ba8b
1 changed files with 60 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
});
}