网页增加水印覆盖

最近需求中，有一个提到的是整体页面水印覆盖，搜索了一圈，思路大概就是这样的：在整个页面的body 下建立一个fixed定位、并且宽高是窗口宽高的div，然后使用canvas进行文本绘画，输出为base字符串，赋值给div的background-image，并通过background-repeat进行文本图片的平铺。

在js代码中，创建watermark后，返回一个函数，用于后期运行删除掉水印的覆盖，具体可以看下方代码，这个里面我写了很多注释，帮助代码理解，基本上即取即用。

代码如下：

import { debounce } from 'lodash'

let id = ''
function setWatermark({
  posX = 15, // 绘制文本的 x 坐标位置
  posY = 65, // 绘制文本的 y 坐标位置
  textSpace = 25, // 有多个参数时的行间间隔
  watermarkId = 'myWatermark', // div的id
  fontSize = '17px', // 水印字体大小
  fontFamily = 'Arial', // 水印字体名称
  fontColor = 'rgba(200, 200, 200, 0.30)', // 水印字体颜色
  markTop = '0px', // div距离屏幕上方的top  （div的position:fixed）
  markLeft = '0px', // div距离屏幕左侧的left
  textContent = [] // 水印内容
} = {}) {
  id = `watermark-${watermarkId}` // 水印div的id，最好命名跟页面的不会有冲突
  let xIndex = posX
  let yIndex = posY
  const xInterval = textSpace
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  // 利用canvas绘制水印信息
  const canvas = document.createElement('canvas')
  canvas.width = 300
  canvas.height = 150
  const cans = canvas.getContext('2d')
  cans.rotate((-20 * Math.PI) / 180)
  cans.font = `${fontSize} ${fontFamily}`
  // 字体颜色
  cans.fillStyle = fontColor
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  for (let i = 0; i < textContent.length; i++) {
    cans.fillText(textContent[i], xIndex, yIndex) // 绘制水印文案
    yIndex += xInterval // 设置每行间隔
  }
  // 创建一个fixed div用于显示
  const div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  div.style.top = markTop
  div.style.left = markLeft
  div.style.position = 'fixed'
  div.style.zIndex = '100000'
  div.style.width = document.documentElement.clientWidth + 'px'
  div.style.height = document.documentElement.clientHeight + 'px'
  // 背景repeat显示
  div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
  document.body.appendChild(div)
  return id
}

function createObserver(id, args) {
  // 创建一个观察器实例并传入回调函数
  const observer = new MutationObserver(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(args)
    }
  })

  const option = {
    childList: true, // 子元素的变动
    subtree: true // 所有下属节点（包括子节点和子节点的子节点）的变动
  }

  observer.observe(document.body, option) // 观察body下节点的变化
  return observer
}

export default function () {
  let args = { ...arguments }
  let id = setWatermark(args[0])
  // 在窗口大小改变之后, 自动触发加水印事件
  const resizeFun = debounce(() => {
    setWatermark(args[0])
  }, 300)

  // createObserver：创建观察器检测如果水印被去掉了
  const watermarkObserver = createObserver(id, args[0])
  // resize事件监听
  window.addEventListener('resize', resizeFun)
  // 删除关闭水印
  const destroyWatermark = () => {
    console.log('watermarkObserver: ', watermarkObserver)
    // 关闭dom的监听
    watermarkObserver.disconnect()
    // 移除resize事件监听
    window.removeEventListener('resize', resizeFun)
    // 删除dom水印元素
    document.getElementsByTagName('body')[0].removeChild(document.getElementById(id))
  }
  return destroyWatermark
}

使用方法如下

<template>
  <div class="layout">
    Demo页面
  </div>
</template>
<script>
export default {
  name: 'Demo'
}
</script>
<script setup>
import watermark from '../watermark'

let watermarkInstance = null
let userName = 'Demo'
let email = '123abc@456.com'
onMounted(() => {
  const userInfo = useUserInfo()
  watermarkInstance = watermark({
    textContent: [userName, email],
    markTop: '10',
    watermarkId: 'Demo'
  })
})
// 卸载的时候关闭水印
onBeforeUnmount(() => {
  watermarkInstance()
})
</script>

<style lang="scss" scoped>

</style>