perf: remove watermark use antdv

pull/30/MERGE
xingyu 2023-08-09 20:03:55 +08:00
parent 4daf15f26b
commit 7aeba3367d
1 changed files with 0 additions and 108 deletions

View File

@ -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 }
}