前沿
之前开发需求,产品希望给所有中台页面添加水印,一方面防止内部人员截图泄漏数据,一方面水印上的内容可以增加些标识,从而能定位到是那个人发出的。
当然这只是一种防护的手段,毕竟水印也是能去除的,但不管怎么样,加这么层东西还是感觉十分有必要的,比如你要分享什么设计稿,你打个logo,水印,最起码能起到点防止作用。
好了,我也不多说,直接分享上代码,咱主打的就是复制就能用,丝毫不墨迹。
代码
/*
* @Author : 桔子
* @Date : 2024-04-07 11:09:15
* @LastEditors : 桔子
* @LastEditTime : 2024-04-29 16:34:25
* @Description : 水印hooks
* @FilePath : /vue-multipage/hooks/web/useWatermark.ts
*/
const domSymbol = Symbol('watermark-dom')
export function useWatermark(
op = 0.15,
appendEl: HTMLElement | null = document.body
) {
let func: any = () => {}
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, ${op})`
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 }
}
使用
import { useWatermark } from '@/hooks/web/useWatermark'
const { setWatermark, clear } = useWatermark(0.2)
onMounted(() => {
setWatermark('桔子水印')
})
onBeforeUnmount(() => {
clear()
})
说明
写了个hooks哈,useWatermark接收两个参数,一个是水印的透明度,可以不传,默认0.15,第二个参数是水印绑定上的dom节点,默认是body,一般也是全局加上,所以这默认body。
这里面其实就是三个方法哈,创建水印,设置水印,清除水印。
如果想修改水印的一些字体信息,可以在createWatermark里面去自行调整,使用起来也很简单,结构出来setWatermark和clear两个方法即可
注意哈,咱们页面销毁就清除掉,以防万一,避免内存泄漏
最后
希望能对各位有用,如果有用到麻烦打赏个赞,感谢🙏