当前位置：首页 > VUE

vue 水印实现

2026-03-07 16:29:19VUE

Vue 水印实现方法

使用 canvas 生成水印

通过 canvas 绘制水印文字或图片，转换为 base64 图片后设置为背景。这种方法适用于需要动态生成水印的场景。

<template>
  <div class="watermark-container"></div>
</template>

<script>
export default {
  mounted() {
    this.createWatermark()
  },
  methods: {
    createWatermark() {
      const canvas = document.createElement('canvas')
      canvas.width = 200
      canvas.height = 150
      const ctx = canvas.getContext('2d')

      ctx.font = '16px Arial'
      ctx.fillStyle = 'rgba(200, 200, 200, 0.3)'
      ctx.rotate(-0.3)
      ctx.fillText('Confidential', 10, 80)

      const watermark = canvas.toDataURL('image/png')
      const container = document.querySelector('.watermark-container')
      container.style.backgroundImage = `url(${watermark})`
      container.style.backgroundRepeat = 'repeat'
    }
  }
}
</script>

CSS 伪元素实现水印

对于简单的水印需求，可以使用 CSS 伪元素实现，性能更好但灵活性较低。

vue 水印实现

<template>
  <div class="watermarked-content">
    <!-- 页面内容 -->
  </div>
</template>

<style>
.watermarked-content {
  position: relative;
}

.watermarked-content::after {
  content: "Watermark Text";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.2;
  font-size: 48px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  z-index: 9999;
}
</style>

使用第三方库

对于更复杂的水印需求，可以考虑使用专门的水印库如 vue-watermark。

安装：

vue 水印实现

npm install vue-watermark

使用：

<template>
  <watermark
    :text="watermarkText"
    :fontSize="16"
    :opacity="0.3"
    :width="200"
    :height="150"
  >
    <!-- 需要加水印的内容 -->
  </watermark>
</template>

<script>
import Watermark from 'vue-watermark'

export default {
  components: {
    Watermark
  },
  data() {
    return {
      watermarkText: 'Confidential'
    }
  }
}
</script>

防止水印被移除

为防止用户通过开发者工具移除水印，可以结合 MutationObserver 监控 DOM 变化，自动重新添加被移除的水印。

mounted() {
  this.createWatermark()
  this.protectWatermark()
},
methods: {
  protectWatermark() {
    const targetNode = document.querySelector('.watermark-container')
    const config = { attributes: true, childList: true, subtree: true }

    const callback = (mutationsList) => {
      for(let mutation of mutationsList) {
        if(mutation.type === 'childList' || 
           mutation.type === 'attributes') {
          this.createWatermark()
        }
      }
    }

    const observer = new MutationObserver(callback)
    observer.observe(targetNode, config)
  }
}