canvas 生成页面水印，MutationObserver 控制节点防修改

网上浏览的时候。看到有些页面会有背景的水印效果，使用canvas实现了个类似的效果，如图

可以作为背景，也可以作为页面前景覆盖，防止网页信息的截图

实现代码

let canvas = document.createElement('canvas')
canvas.id = '__canvas'
canvas.width = '180' // 每个水印的宽高
canvas.height = '150'
let ctx = canvas.getContext('2d')
ctx.fillStyle = 'rgba(150, 150, 150, 0.5)'
ctx.rotate((25 * Math.PI) / 180) // 偏转的角度
ctx.fillText('originDu, 30, 20)  // 绘制文本 绘制开始位置

let src = canvas.toDataURL('image/png')

// 水印容器
let waterMaskdiv = document.createElement('div')

waterMaskDiv.style.position = 'fixed'
waterMaskDiv.style.zIndex = '-1'
waterMaskDiv.id = '__water-mark'
waterMaskDiv.style.top = '0'
waterMaskDiv.style.left = '0'
waterMaskDiv.style.height = '100%'
waterMaskDiv.style.width = '100%'
waterMaskDiv.style.pointerEvents = 'none'
waterMaskDiv.style.backgroundImage = 'URL(' + src + ')'
// 水印节点插到body下 可以通过层级控制节点层次
document.body.appendChild(waterMaskDiv)

 

广州品牌设计公司https://www.houdianzi.com

如果是要起到截图水印的效果，那就要防止用户使用开发者工具之类的删除或者修改节点的样式去除水印，这时候可以用到 MutationObserver 构造函数，他可以创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用

// 禁止修改水印节点
let targetNode = document.querySelector('#__water-mark')
let config = {
	childList: true,
	attributes: true,
	characterData: true,
	subtree: true,
	attributeOldValue: true,
	characterDataOldValue: true
}

const mutationCallback = mutationList => {
  for (let mutation of mutationList) {
    let type = mutation.type
    switch (type) {
      case 'childList':
        console.log('节点被删除或添加')
        break
	  case 'attributes':
		console.log(`${mutation.attributeName}属性修改了`)
        break
      case 'subtree':
        console.log('子树被修改')
		break
	  default:
		break
    }
  }
}

// 创建 MutationObserver 实例
let observer = new MutationObserver(mutationCallback)

// 开始监控目标节点
observer.observe(document.body, config)

// 停止监控
// observer.disconnect()

在检测到修改的时候，可以对比被修改的元素的ID，如果是水印的ID，这时候可以删除水印div后重新执行第一步的插入操作，以达到避免水印被修改的目的