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 domSymbol = Symbol('watermark-dom');
|
const sourceMap = new WeakMap<HTMLElement, {}>();
|
|
export function useWatermark(
|
appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>,
|
) {
|
const appendElRaw = unref(appendEl);
|
if (appendElRaw && sourceMap.has(appendElRaw)) {
|
return sourceMap.get(appendElRaw);
|
}
|
const func = useRafThrottle(function () {
|
const el = unref(appendEl);
|
if (!el) return;
|
const { clientHeight: height, clientWidth: width } = el;
|
updateWatermark({ height, width });
|
});
|
const id = domSymbol.toString();
|
const watermarkEl = shallowRef<HTMLElement>();
|
|
const clear = () => {
|
const domId = unref(watermarkEl);
|
watermarkEl.value = undefined;
|
const el = unref(appendEl);
|
if (!el) return;
|
domId && el.removeChild(domId);
|
removeResizeListener(el, func);
|
};
|
|
function createBase64(str: string) {
|
const can = document.createElement('canvas');
|
const width = 300;
|
const height = 240;
|
Object.assign(can, { width, height });
|
|
const cans = can.getContext('2d');
|
if (cans) {
|
cans.rotate((-20 * Math.PI) / 120);
|
cans.font = '15px Vedana';
|
cans.fillStyle = 'rgba(0, 0, 0, 0.15)';
|
cans.textAlign = 'left';
|
cans.textBaseline = 'middle';
|
cans.fillText(str, width / 20, height);
|
}
|
return can.toDataURL('image/png');
|
}
|
|
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)}) left top repeat`;
|
}
|
}
|
|
const createWatermark = (str: string) => {
|
if (unref(watermarkEl)) {
|
updateWatermark({ str });
|
return id;
|
}
|
const div = document.createElement('div');
|
watermarkEl.value = div;
|
div.id = id;
|
div.style.pointerEvents = 'none';
|
div.style.top = '0px';
|
div.style.left = '0px';
|
div.style.position = 'absolute';
|
div.style.zIndex = '100000';
|
const el = unref(appendEl);
|
if (!el) return id;
|
const { clientHeight: height, clientWidth: width } = el;
|
updateWatermark({ str, width, height });
|
el.appendChild(div);
|
sourceMap.set(el, { setWatermark, clear });
|
return id;
|
};
|
|
function setWatermark(str: string) {
|
createWatermark(str);
|
addResizeListener(document.documentElement, func);
|
const instance = getCurrentInstance();
|
if (instance) {
|
onBeforeUnmount(() => {
|
clear();
|
});
|
}
|
}
|
|
return { setWatermark, clear };
|
}
|
