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

摘要：网上浏览的时候。看到有些页面会有背景的水印效果，使用canvas实现了个类似的效果，可以作为背景，也可以作为页面前景覆盖，防止网页信息的截图

网上浏览的时候。看到有些页面会有背景的水印效果，使用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)

如果是要起到截图水印的效果，那就要防止用户使用开发者工具之类的删除或者修改节点的样式去除水印，这时候可以用到 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后重新执行第一步的插入操作，以达到避免水印被修改的目的

来自:https://my.oschina.net/mdu/blog/3066086

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3883