字数
840 字
阅读时间
5 分钟
使用
ts
const { setWatermark, clear, clearAll } = useWatermark();
const { setWatermark: setWatermark2 } = useWatermark();
const { setWatermark: setWatermark3 } = useWatermark(app, {
fontColor: "red",
fontSize: 12,
rotate: 30,
});
onUnmounted(() => {
clearAll();
});节流和监听
ts
export function addResizeListener(element: any, fn: () => any) {
if (isServer) return;
if (!element.__resizeListeners__) {
element.__resizeListeners__ = [];
element.__ro__ = new ResizeObserver(resizeHandler);
element.__ro__.observe(element);
}
element.__resizeListeners__.push(fn);
}
export function removeResizeListener(element: any, fn: () => any) {
if (!element || !element.__resizeListeners__) return;
element.__resizeListeners__.splice(
element.__resizeListeners__.indexOf(fn),
1
);
if (!element.__resizeListeners__.length) {
element.__ro__.disconnect();
}
}
export function useRafThrottle<T extends FunctionArgs>(fn: T): T {
let locked = false;
// @ts-ignore
return function (...args: any[]) {
if (locked) return;
locked = true;
window.requestAnimationFrame(() => {
// @ts-ignore
fn.apply(this, args);
locked = false;
});
};
}源码
ts
import {
getCurrentInstance,
onBeforeUnmount,
ref,
Ref,
shallowRef,
unref,
} from "vue";
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.attributeName === "style" && mutation.target) {
const _target = mutation.target as HTMLElement;
const target = findTargetNode(_target);
if (target) {
const { waterMarkOptions = {} } = target;
resetWatermarkStyle(
_target as HTMLElement,
_target?.["data-watermark-text"],
waterMarkOptions
);
}
}
}
});
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();
});
}贡献者
chenjie
jiechen