页面添加水印(防止删除)

//仅学习记录使用

页面使用

import watermark from '@/utils/watermark.js'
export default {
    name: 'App',
   data() {
        return {
            str: {
                name: this.$store.getters.userName, //
                phone: (this.$store.getters.mobile || '').substr(-4),
                company: '公司'
            }
        }
    },
    mounted() {
        watermark.set(this.str)
    },
    created() {
    },
    updated() {
        console.log('更新了', '更新了')
    },
    destroyed() {
        watermark.out(this.str)
    }
}

js核心代码

const id = '1.23452384164.123412416'
const setWatermark = (str) => {
    const existingWatermark = document.getElementById(id)
    if (existingWatermark !== null) {
        document.body.removeChild(existingWatermark)
    }

    // 创建一个画布
    const canvas = document.createElement('canvas')
    // 设置画布的长宽
    canvas.width = 220
    canvas.height = 220

    const context = canvas.getContext('2d')
    // 控制文字的旋转角度和上下位置
    context.rotate(-20 * Math.PI / 180)
    context.translate(-50, 20)
    // 文字颜色
    context.fillStyle = 'rgba(0,0,0,0.07)'
    context.textBaseline = 'Middle'
    context.font = '14px Arial,"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif'
    // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
    const text = `${str.name} ${str.phone}`
    context.fillText(text, canvas.width / 4, canvas.height / 2.5)
    context.fillText(text, canvas.width / 3, canvas.height)
    //
    const div = document.createElement('div')
    div.id = id
    div.style.pointerEvents = 'none'
    div.style.top = '0vw'
    div.style.left = '0vw'
    div.style.position = 'fixed'
    div.style.zIndex = '99'
    div.style.display = 'block'
    div.style.width = '100vw'
    div.style.height = '100vw'
    div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
    document.body.appendChild(div)
}
let observer = null
let timer = null
// 添加水印该方法只允许调用一次
const watermark = {
    set: (str) => {
        setWatermark(str)
        clearInterval(timer)
        timer = setInterval(() => {
            if (!document.getElementById(id)) setWatermark(str)
        }, 500)
        window.onresize = () => {
            setWatermark(str)
        }
        if (!observer) {
            observer = new MutationObserver((mutationsList) => {
                mutationsList.forEach(mutation => {
                    if (mutation.type === 'childList' || mutation.type === 'attributes') {
                        const target = mutation.target
                        if (target.id === id) {
                            setWatermark(str) // 重新添加水印
                        }
                    }
                })
            })

            const body = document.getElementsByTagName('body')[0]
            // 监听body节点
            observer.observe(body, {
                childList: true,
                attributes: true,
                characterData: true,
                subtree: true,
                attributeOldValue: true,
                characterDataOldValue: true
            })
        }
    },
    out: () => {
        // 去除水印
        const watermarkElement = document.getElementById(id)
        if (watermarkElement !== null) {
            watermarkElement.style.display = 'none'
            observer && observer.disconnect()
        }
        clearInterval(timer)
    }
}
export default watermark