You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.5 KiB
56 lines
1.5 KiB
8 months ago
|
const domSymbol = Symbol('watermark-dom')
|
||
|
|
|
||
|
|
export function useWatermark(appendEl: HTMLElement | null = document.body) {
|
||
|
|
let func: Fn = () => {}
|
||
|
|
const id = domSymbol.toString()
|
||
|
|
const clear = () => {
|
||
|
|
const domId = document.getElementById(id)
|
||
|
|
if (domId) {
|
||
|
|
const el = appendEl
|
||
|
|
el && el.removeChild(domId)
|
||
|
|
}
|
||
|
|
window.removeEventListener('resize', func)
|
||
|
|
}
|
||
|
|
const createWatermark = (str: string) => {
|
||
|
|
clear()
|
||
|
|
|
||
|
|
const can = document.createElement('canvas')
|
||
|
|
can.width = 300
|
||
|
|
can.height = 240
|
||
|
|
|
||
|
|
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, can.width / 20, can.height)
|
||
|
|
}
|
||
|
|
|
||
|
|
const div = document.createElement('div')
|
||
|
|
div.id = id
|
||
|
|
div.style.pointerEvents = 'none'
|
||
|
|
div.style.top = '0px'
|
||
|
|
div.style.left = '0px'
|
||
|
|
div.style.position = 'absolute'
|
||
|
|
div.style.zIndex = '100000000'
|
||
|
|
div.style.width = document.documentElement.clientWidth + 'px'
|
||
|
|
div.style.height = document.documentElement.clientHeight + 'px'
|
||
|
|
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
|
||
|
|
const el = appendEl
|
||
|
|
el && el.appendChild(div)
|
||
|
|
return id
|
||
|
|
}
|
||
|
|
|
||
|
|
function setWatermark(str: string) {
|
||
|
|
createWatermark(str)
|
||
|
|
func = () => {
|
||
|
|
createWatermark(str)
|
||
|
|
}
|
||
|
|
window.addEventListener('resize', func)
|
||
|
|
}
|
||
|
|
|
||
|
|
return { setWatermark, clear }
|
||
|
|
}
|