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)