vue 项目使用vue-watermark组件给页面添加满屏水印

• vue-watermark

        专为 Vue 设计的水印组件，可添加文本或图片水印

npm install vue-watermark

注册为局部组件 

<template>
  <div id="app">
    <vue-watermark
      text="水印文字"
      :font-size="16"
      :line-height="24"
      :width="120"
      :height="80"
      :angle="-15"
      :opacity="0.2"
    />
  </div>
</template>

<script>
import VueWatermark from 'vue-watermark';

export default {
  name: 'App',
  components: {
    VueWatermark,
  },
}
</script>

注册为全局组件：

import VueWatermark from 'vue-watermark';
Vue.component('VueWatermark',VueWatermark)

要用的页面引用即可

    <vue-watermark
      text="水印文字"
      :font-size="16"
      :line-height="24"
      :width="120"
      :height="80"
      :angle="-15"
      :opacity="0.2"
    />

 

• canvas 生成水印做背景图

创建一个水印组件 WatermarkIndex.vue

<template>
    <div class="watermark-container">
      <slot></slot>
      <div class="watermark" :style="watermarkStyle"></div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'WatermarkIndex',
    props: {
      text: {
        type: String,
        default: 'Watermark'
      },
      fontSize: {
        type: Number,
        default: 16
      },
      color: {
        type: String,
        default: 'rgba(0, 0, 0, 0.1)'
      },
      angle: {
        type: Number,
        default: -20
      }
    },
    computed: {
      watermarkStyle() {
        return {
          backgroundImage: `url("${this.generateWatermarkImage()}")`,
          backgroundSize: `${this.fontSize * 5}px ${this.fontSize * 2}px`,
          backgroundRepeat: 'repeat',
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          pointerEvents: 'none',
          zIndex: 9999
        }
      }
    },
    methods: {
      // 使用Canvas生成水印图像，并将其转换为Data URL，作为背景图像使用
      generateWatermarkImage() {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
  
        canvas.width = 200
        canvas.height = 100
  
        ctx.font = `${this.fontSize}px Arial`
        ctx.fillStyle = this.color
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.translate(canvas.width / 2, canvas.height / 2)
        ctx.rotate((this.angle * Math.PI) / 180)
        ctx.fillText(this.text, 0, 0)
  
        return canvas.toDataURL()
      }
    }
  }
  </script>
  
  <style scoped>
  .watermark-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  </style>

在页面中引入 水印组件 

<template>
  <div>
    <Watermark text="Confidential" :fontSize="20" color="rgba(0, 0, 0, 0.2)" :angle="-30">
      <!-- 你的页面内容 -->
      <div>
        <h1>文本内容</h1>
      </div>
    </Watermark>
  </div>
</template>

<script>
import Watermark from '../components/WatermarkIndex.vue';

export default {
  components: {
    Watermark
  }
}
</script>