当前位置：首页 > VUE

vue实现网页水印

2026-01-11 22:19:50VUE

添加静态水印

在Vue中可以通过CSS或Canvas实现静态水印。CSS方法适合简单文字水印，Canvas适合复杂水印效果。

<template>
  <div class="watermark-container">
    <!-- 页面内容 -->
    <div class="watermark"></div>
  </div>
</template>

<style>
.watermark-container {
  position: relative;
}
.watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="0" y="20" font-family="Arial" font-size="10" fill="rgba(0,0,0,0.1)" transform="rotate(-45 100,100)">水印内容</text></svg>');
  background-repeat: repeat;
  z-index: 9999;
}
</style>

使用Canvas动态生成水印

Canvas可以实现更灵活的水印效果，包括旋转、透明度、字体样式等。

// utils/watermark.js
export function createWatermark(text) {
  const canvas = document.createElement('canvas')
  canvas.width = 200
  canvas.height = 200
  const ctx = canvas.getContext('2d')

  ctx.font = '14px Arial'
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
  ctx.rotate(-45 * Math.PI / 180)
  ctx.fillText(text, 10, 100)

  return canvas.toDataURL()
}

<template>
  <div class="container" :style="{ backgroundImage: `url(${watermark})` }">
    <!-- 页面内容 -->
  </div>
</template>

<script>
import { createWatermark } from './utils/watermark'

export default {
  data() {
    return {
      watermark: ''
    }
  },
  mounted() {
    this.watermark = createWatermark('机密文件')
  }
}
</script>

<style>
.container {
  position: relative;
  background-repeat: repeat;
  min-height: 100vh;
}
</style>

防止水印被删除

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

// utils/protectWatermark.js
export function protectWatermark(watermarkId) {
  const targetNode = document.getElementById(watermarkId)
  if (!targetNode) return

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.removedNodes.length) {
        mutation.removedNodes.forEach((node) => {
          if (node.id === watermarkId) {
            document.body.appendChild(node)
          }
        })
      }
    })
  })

  observer.observe(document.body, {
    childList: true,
    subtree: true
  })

  return observer
}

响应式水印

根据屏幕大小调整水印密度和大小。

export function createResponsiveWatermark(text) {
  const canvas = document.createElement('canvas')
  const size = window.innerWidth < 768 ? 150 : 200
  canvas.width = size
  canvas.height = size

  const ctx = canvas.getContext('2d')
  const fontSize = window.innerWidth < 768 ? 12 : 16

  ctx.font = `${fontSize}px Arial`
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
  ctx.rotate(-45 * Math.PI / 180)
  ctx.fillText(text, 10, size/2)

  return canvas.toDataURL()
}

多用户水印

为不同用户显示不同水印内容，通常用于追踪信息泄露源。

export function createUserWatermark(userInfo) {
  const text = `${userInfo.name} ${userInfo.id}`
  return createWatermark(text)
}

使用时在Vue组件中：

vue实现网页水印

mounted() {
  const userInfo = this.$store.state.user // 从Vuex获取用户信息
  this.watermark = createUserWatermark(userInfo)
  protectWatermark('watermark-element')
}