前端增加水印覆盖

最近需求中，有一个提到的是整体页面水印覆盖，搜索了一圈，思路大概就是这样的：在整个页面的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>