1 changed files with 0 additions and 108 deletions
@ -1,108 +0,0 @@ |
|||||||
import type { Ref } from 'vue' |
|
||||||
import { getCurrentInstance, onBeforeUnmount, 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, object>() |
|
||||||
|
|
||||||
export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.body)) { |
|
||||||
const appendElRaw = unref(appendEl) |
|
||||||
if (appendElRaw && sourceMap.has(appendElRaw)) |
|
||||||
return sourceMap.get(appendElRaw) |
|
||||||
|
|
||||||
const func = useRafThrottle(() => { |
|
||||||
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 } |
|
||||||
} |
|
Reference in new issue