//仅学习记录使用

页面使用

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 watermark = {}

const setWatermark = (str) => {
    const id = '1.23452384164.123412416'

    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id))
    }

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

    const cans = can.getContext('2d')
    // 控制文字的旋转角度和上下位置
    cans.rotate(-20 * Math.PI / 180)
    cans.translate(-50, 20)
    // 文字颜色
    cans.fillStyle = 'rgba(0,0,0,0.07)'
    cans.textBaseline = 'Middle'
    cans.font = '14px Arial,"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif'
    // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
    cans.fillText(str.name + ' ' + str.phone, can.width / 3, can.height / 2.5)
    cans.font = '14px Arial,"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif'
    cans.fillText(str.name + ' ' + str.phone, can.width / 2, can.height)
    cans.font = '14px Arial,"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif'
    // cans.fillText(str.company, 80, 55)

    // 绘制logo
    // var img = document.getElementById('imgUrl')
    // cans.drawImage(img, 30, 30, 40, 40)

    var 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.width = '100vw'
    div.style.height = '100vw'
   div.style.display = 'block'
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
    document.body.appendChild(div)
    setTimeout(() => {
        // 防止用户在控制台修改删除水印
        const body = document.getElementsByTagName('body')[0]
        const options = {
            childList: true,
            attributes: true,
            characterData: true,
            subtree: true,
            attributeOldValue: true,
            characterDataOldValue: true
        }
        const observer = new MutationObserver(() => {
            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.width = '100vw'
            div.style.height = '100vw'
             div.style.display = 'block'
            div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
            observer.disconnect()
            observer.observe(body, options)
            return false
        })
        observer.observe(body, options) // 监听body节点
    }, 1000) // 防止在页面未渲染完成的时候找不到页面id
    return id
}
let timer = null
// 添加水印该方法只允许调用一次
watermark.set = (str) => {
    let id = setWatermark(str)
    clearInterval(timer)
    timer = setInterval(() => {
        if (document.getElementById(id) === null) {
            id = setWatermark(str)
        }
    }, 500)
    window.onresize = () => {
        setWatermark(str)
    }
}

const outWatermark = (id) => {
    if (document.getElementById(id) !== null) {
        const div = document.getElementById(id)
        div.style.display = 'none'
    }
}

watermark.out = () => {
    const str = '1.23452384164.123412416'
    outWatermark(str)
    clearInterval(timer)
    // 去除水印
}
export default watermark