import { getCurrentInstance, onBeforeUnmount, ref, Ref, shallowRef, unref } from 'vue';
|
import { useRafThrottle } from '@/utils/domUtils';
|
import { addResizeListener, removeResizeListener } from '@/utils/event';
|
import { isDef } from '@/utils/is';
|
|
const watermarkSymbol = 'watermark-dom';
|
const updateWatermarkText = ref<string | null>(null);
|
|
type UseWatermarkRes = {
|
setWatermark: (str: string) => void;
|
clear: () => void;
|
clearAll: () => void;
|
waterMarkOptions?: waterMarkOptionsType;
|
obInstance?: MutationObserver;
|
targetElement?: HTMLElement;
|
parentElement?: HTMLElement;
|
};
|
|
type waterMarkOptionsType = {
|
// 自定义水印的文字大小
|
fontSize?: number;
|
// 自定义水印的文字颜色
|
fontColor?: string;
|
// 自定义水印的文字字体
|
fontFamily?: string;
|
// 自定义水印的文字对齐方式
|
textAlign?: CanvasTextAlign;
|
// 自定义水印的文字基线
|
textBaseline?: CanvasTextBaseline;
|
// 自定义水印的文字倾斜角度
|
rotate?: number;
|
};
|
|
const sourceMap = new Map<Symbol, Omit<UseWatermarkRes, 'clearAll'>>();
|
|
function findTargetNode(el) {
|
return Array.from(sourceMap.values()).find((item) => item.targetElement === el);
|
}
|
|
function createBase64(str: string, waterMarkOptions: waterMarkOptionsType) {
|
const can = document.createElement('canvas');
|
const width = 300;
|
const height = 240;
|
Object.assign(can, { width, height });
|
|
const cans = can.getContext('2d');
|
if (cans) {
|
const fontFamily = waterMarkOptions?.fontFamily || 'Vedana';
|
const fontSize = waterMarkOptions?.fontSize || 15;
|
const fontColor = waterMarkOptions?.fontColor || 'rgba(0, 0, 0, 0.15)';
|
const textAlign = waterMarkOptions?.textAlign || 'left';
|
const textBaseline = waterMarkOptions?.textBaseline || 'middle';
|
const rotate = waterMarkOptions?.rotate || 20;
|
cans.rotate((-rotate * Math.PI) / 180);
|
cans.font = `${fontSize}px ${fontFamily}`;
|
cans.fillStyle = fontColor;
|
cans.textAlign = textAlign;
|
cans.textBaseline = textBaseline;
|
cans.fillText(str, width / 20, height);
|
}
|
return can.toDataURL('image/png');
|
}
|
const resetWatermarkStyle = (
|
element: HTMLElement,
|
watermarkText: string,
|
waterMarkOptions: waterMarkOptionsType,
|
) => {
|
element.className = '__' + watermarkSymbol;
|
element.style.pointerEvents = 'none';
|
element.style.display = 'block';
|
element.style.visibility = 'visible';
|
element.style.top = '0px';
|
element.style.left = '0px';
|
element.style.position = 'absolute';
|
element.style.zIndex = '100000';
|
element.style.height = '100%';
|
element.style.width = '100%';
|
element.style.background = `url(${createBase64(
|
unref(updateWatermarkText) || watermarkText,
|
waterMarkOptions,
|
)}) left top repeat`;
|
};
|
|
const obFn = () => {
|
const obInstance = new MutationObserver((mutationRecords) => {
|
for (const mutation of mutationRecords) {
|
for (const node of Array.from(mutation.removedNodes)) {
|
const target = findTargetNode(node);
|
if (!target) return;
|
const { targetElement, parentElement } = target;
|
// 父元素的子元素水印如果被删除 重新插入被删除的水印(防篡改，插入通过控制台删除的水印)
|
if (!parentElement?.contains(targetElement as Node | null)) {
|
target?.parentElement?.appendChild(node as HTMLElement);
|
}
|
}
|
if (mutation.type === 'attributes' && mutation.target) {
|
// 修复控制台可以”Hide element” 的问题
|
const _target = mutation.target as HTMLElement;
|
const target = findTargetNode(_target);
|
if (target) {
|
// 禁止改属性 包括class 修改以后 mutation.type 也等于 'attributes'
|
// 先解除监听 再加一下
|
clearAll();
|
target.setWatermark(target.targetElement?.['data-watermark-text']);
|
}
|
}
|
}
|
});
|
return obInstance;
|
};
|
|
export function useWatermark(
|
appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>,
|
waterMarkOptions: waterMarkOptionsType = {},
|
): UseWatermarkRes {
|
const domSymbol = Symbol(watermarkSymbol);
|
const appendElRaw = unref(appendEl);
|
if (appendElRaw && sourceMap.has(domSymbol)) {
|
const { setWatermark, clear } = sourceMap.get(domSymbol) as UseWatermarkRes;
|
return { setWatermark, clear, clearAll };
|
}
|
const func = useRafThrottle(function () {
|
const el = unref(appendEl);
|
if (!el) return;
|
const { clientHeight: height, clientWidth: width } = el;
|
updateWatermark({ height, width });
|
});
|
const watermarkEl = shallowRef<HTMLElement>();
|
const clear = () => {
|
const domId = unref(watermarkEl);
|
watermarkEl.value = undefined;
|
const el = unref(appendEl);
|
sourceMap.has(domSymbol) && sourceMap.get(domSymbol)?.obInstance?.disconnect();
|
sourceMap.delete(domSymbol);
|
if (!el) return;
|
domId && el.removeChild(domId);
|
removeResizeListener(el, func);
|
};
|
|
function updateWatermark(
|
options: {
|
width?: number;
|
height?: number;
|
str?: string;
|
} = {},
|
) {
|
const el = unref(watermarkEl);
|
if (!el) return;
|
if (isDef(options.width)) {
|
el.style.width = `${options.width}px`;
|
}
|
if (isDef(options.height)) {
|
el.style.height = `${options.height}px`;
|
}
|
if (isDef(options.str)) {
|
el.style.background = `url(${createBase64(options.str, waterMarkOptions)}) left top repeat`;
|
}
|
}
|
|
const createWatermark = (str: string) => {
|
if (unref(watermarkEl) && sourceMap.has(domSymbol)) {
|
updateWatermarkText.value = str;
|
updateWatermark({ str });
|
return;
|
}
|
const div = document.createElement('div');
|
div['data-watermark-text'] = str; //自定义属性 用于恢复水印
|
updateWatermarkText.value = str;
|
watermarkEl.value = div;
|
resetWatermarkStyle(div, str, waterMarkOptions);
|
const el = unref(appendEl);
|
if (!el) return;
|
const { clientHeight: height, clientWidth: width } = el;
|
updateWatermark({ str, width, height });
|
el.appendChild(div);
|
sourceMap.set(domSymbol, {
|
setWatermark,
|
clear,
|
parentElement: el,
|
targetElement: div,
|
obInstance: obFn(),
|
waterMarkOptions,
|
});
|
sourceMap.get(domSymbol)?.obInstance?.observe(el, {
|
childList: true, // 子节点的变动（指新增，删除或者更改）
|
subtree: true, // 该观察器应用于该节点的所有后代节点
|
attributes: true, // 属性的变动
|
});
|
};
|
|
function setWatermark(str: string) {
|
createWatermark(str);
|
addResizeListener(document.documentElement, func);
|
const instance = getCurrentInstance();
|
if (instance) {
|
onBeforeUnmount(() => {
|
clear();
|
});
|
}
|
}
|
return { setWatermark, clear, clearAll };
|
}
|
|
function clearAll() {
|
Array.from(sourceMap.values()).forEach((item) => {
|
item?.obInstance?.disconnect();
|
item.clear();
|
});
|
}
|
