将此段代码放置top页面
(function () {
const watermarkTxt = '水印文本'
const size = 150 //水印间隙 值越大水印数量越少
const canvas = document.createElement('canvas')//创建canvas，用于生成base64图片充当水印
const ctx = canvas.getContext('2d')
canvas.width = size
canvas.height = size
ctx.font = '18px serif'
ctx.translate(size / 2, size / 2)
ctx.rotate((Math.PI / 180) * -45)
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillStyle = 'rgba(0, 0, 0, .06)'
ctx.fillText(watermarkTxt, 0, 0)
const base64 = canvas.toDataURL()
let watermark;//水印元素
function _generate() {
watermark && watermark.remove()
watermark = document.createElement('div')
watermark.style.position = 'fixed'
watermark.style.inset = 0
watermark.style.zIndex = 2147483647
watermark.style.pointerEvents = 'none'
watermark.style.backgroundImage = 'url(' + base64 + ')'
document.body.append(watermark)
}
_generate()//调用生成页面水印
//通过MutationObserver监听元素修改，防止水印篡改
new MutationObserver(records => {
for (const record of records) {
//通过F12修改Style，删除水印重新绘制
if (record.target === watermark) {
_generate()
}
for (const item of record.removedNodes) {
//通过F12删除水印元素，重新生成
if (item === watermark) {
_generate()
}
}
}
}).observe(document.body, {
childList: true,
subtree: true,
attributes: true
})
})()