vue给页面添加水印

vue给页面添加水印

<template>
  <div class="home">
    <router-view />
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {}
    },
    computed: {},
    mounted() {
      // 获取需要观察的节点
      const target = document.querySelector('.home')
      // 观察器配置
      const config = {
        attributes: true, // 监听目标元素属性的变化
        childList: true, // 监听目标原型子节点的变化
        subtree: false, // 是否观察后代的变化。默认false
      }
      // 创建观察器
      const observer = new MutationObserver(() => {
        // 获取背景图片
        const bgi = target?.style?.backgroundImage
        console.log('背景的值：', bgi)
        if (!bgi) {
          // 当背景被取消后，重新添加
          this.initWatermark()
        }
      })
      // 开始观察
      observer.observe(target, config)
      // 停止观察
      // observer.disconnect()
      this.initWatermark()
    },
    methods: {
      initWatermark() {
        // 创建一个canvas
        const canvas = document.createElement('canvas')
        // 设置画布的宽高
        canvas.width = 200
        canvas.height = 200
        // 获取画笔
        const ctx = canvas.getContext('2d')
        // 水印，水印实际上就是将文字添加到画布上
        ctx.font = '30px Arial' // 设置字体大小和字体
        ctx.rotate(-0.4) // 设置文字旋转角度

        // 创建实体水印
        ctx.fillStyle = 'rgba(0,0,0,.3)' // 颜色
        ctx.fillText('这是水印', canvas.width / 6, canvas.height / 2) // 设置显示文字和偏移量

        // 创建虚心水印
        // ctx.strokeStyle = 'rgba(0,0,0,.3)';
        // ctx?.strokeText('这是水印', canvas.width / 6, canvas.height / 2);

        // // 渐变水印
        // const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
        // gradient.addColorStop(0, 'red')
        // gradient.addColorStop(0.5, 'yellow')
        // gradient.addColorStop(1, 'green')
        // ctx.fillStyle = gradient // 颜色
        // ctx.fillText('这是水印', canvas.width / 6, canvas.height / 2) // 设置显示文字和偏移量

        // 将画布转成图片
        const img = canvas.toDataURL()
        const main = document.querySelector('.home')
        main.style.backgroundImage = `url(${img})`
      },
    },
  }
</script>

<style lang="scss" scoped>
  .home {
  }
  .flex {
    display: flex;
  }
  .flex-s {
    display: flex;
    justify-content: space-between;
  }
</style>