vue实现网页水印

Vue 实现网页水印的方法

使用 canvas 生成水印背景

通过 canvas 动态生成水印图案，将其作为背景图添加到目标元素或整个页面。这种方法灵活且支持自定义文本、旋转角度和透明度。

// 在 Vue 组件中定义方法
methods: {
  generateWatermark(text, color = 'rgba(180, 180, 180, 0.3)', angle = -20) {
    const canvas = document.createElement('canvas')
    canvas.width = 200
    canvas.height = 150
    const ctx = canvas.getContext('2d')

    ctx.font = '16px Arial'
    ctx.fillStyle = color
    ctx.rotate(angle * Math.PI / 180)
    ctx.fillText(text, 10, 80)

    return canvas.toDataURL('image/png')
  }
}

全局指令实现水印

创建 Vue 指令可复用水印功能，通过指令参数传递配置项。

// 注册全局指令
Vue.directive('watermark', {
  inserted(el, binding) {
    const { text, color, angle } = binding.value || {}
    const url = this.generateWatermark(text || '保密资料', color, angle)

    el.style.backgroundImage = `url(${url})`
    el.style.backgroundRepeat = 'repeat'
  },
  methods: {
    generateWatermark() { /* 同前文方法 */ }
  }
})

// 使用方式
<div v-watermark="{ text: '内部文件', color: 'rgba(120,120,120,0.1)' }"></div>

防删除水印方案

为防止用户通过开发者工具删除水印，可采用 MutationObserver 监控 DOM 变化。

// 在 mounted 钩子中实现
mounted() {
  const watermark = document.createElement('div')
  watermark.className = 'global-watermark'
  // 设置水印样式...

  document.body.appendChild(watermark)

  const observer = new MutationObserver(() => {
    if (!document.querySelector('.global-watermark')) {
      document.body.appendChild(watermark)
    }
  })
  observer.observe(document.body, { childList: true })
}

动态水印方案

对于需要显示用户信息的水印，可结合 Vue 响应式数据实现动态更新。

data() {
  return {
    watermarkText: `用户ID: ${userID}`,
    watermarkConfig: {
      color: 'rgba(100,100,100,0.2)',
      angle: -15
    }
  }
},
watch: {
  watermarkText(newVal) {
    this.updateWatermark(newVal)
  }
}

CSS-only 简易方案

对于简单场景，可用纯 CSS 实现基础水印效果。

<div class="watermarked-container">
  <div class="watermark">样本水印</div>
  <!-- 页面内容 -->
</div>

<style>
.watermarked-container {
  position: relative;
}
.watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.2;
  transform: rotate(-15deg);
  z-index: 9999;
}
</style>

每种方案适用于不同场景，canvas 方案适合需要精细控制的场景，指令方式便于复用，MutationObserver 方案提供防删除保护，CSS 方案实现最简单。可根据实际需求选择或组合使用。