1. 新建WaterMark.js文件
class WaterMark {
static set (str) {
const id = '1.23452384164.123412415'
const oldNode = document.getElementById(id)
if (oldNode) {
document.body.removeChild(oldNode)
}
const can = document.createElement('canvas')
can.width = 150
can.height = 120
const ctx = can.getContext('2d')
if (ctx) {
ctx.rotate((-20 * Math.PI) / 180)
ctx.font = '20px Vedana'
ctx.fillStyle = 'rgba(200, 200, 200, 0.20)'
ctx.textAlign = 'left'
ctx.textBaseline = 'middle'
ctx.fillText(str, can.width / 4, can.height / 2)
}
const div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '64px' //调用覆盖范围
div.style.left = '100px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = '100%'
div.style.height = '100vh'
div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`
document.body.appendChild(div)
}
}
export default WaterMark
2. 使用
在需要使用的js文件中引入WaterMark.js,用户登陆成功之后调用 WaterMark(userId)