123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- 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');
- export function useWatermark(
- appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>
- ) {
- 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);
- return id;
- };
- function setWatermark(str: string) {
- createWatermark(str);
- addResizeListener(document.documentElement, func);
- const instance = getCurrentInstance();
- if (instance) {
- onBeforeUnmount(() => {
- clear();
- });
- }
- }
- return { setWatermark, clear };
- }
|