当前位置：首页 > VUE

vue实现水印

2026-03-07 05:17:38VUE

实现水印的基本原理

在Vue中实现水印通常通过CSS或Canvas技术完成。CSS方式适合简单文字水印，Canvas适合复杂水印（如图片、旋转文字等）。核心思路是创建一个覆盖全屏的半透明图层。

CSS方式实现水印

<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" opacity="0.1"><text x="20" y="30" transform="rotate(-30 100,100)" fill="gray">Watermark</text></svg>');
  background-repeat: repeat;
  z-index: 9999;
}
</style>

Canvas方式实现动态水印

<template>
  <div ref="watermarkContainer" class="content-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(128, 128, 128, 0.3)';
      ctx.rotate(-Math.PI / 6);
      ctx.fillText('Confidential', 10, 80);

      const watermark = document.createElement('div');
      watermark.style.position = 'absolute';
      watermark.style.top = '0';
      watermark.style.left = '0';
      watermark.style.width = '100%';
      watermark.style.height = '100%';
      watermark.style.pointerEvents = 'none';
      watermark.style.backgroundImage = `url(${canvas.toDataURL()})`;
      watermark.style.backgroundRepeat = 'repeat';
      watermark.style.zIndex = '9999';

      this.$refs.watermarkContainer.appendChild(watermark);
    }
  }
}
</script>

防止水印被删除

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

vue实现水印

methods: {
  observeWatermark() {
    const targetNode = this.$refs.watermarkContainer;
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (!document.contains(watermark)) {
          targetNode.appendChild(watermark);
        }
      });
    });

    observer.observe(targetNode, {
      childList: true,
      subtree: true
    });

    this.$once('hook:beforeDestroy', () => {
      observer.disconnect();
    });
  }
}

动态水印内容

可将用户名等信息动态注入水印：

createWatermark() {
  const userInfo = this.$store.state.user.name;
  // ... canvas绘制时使用userInfo
}

服务端渲染水印

对于更安全的场景，可在服务端生成水印图片：

vue实现水印

// 伪代码示例
const serverWatermark = await axios.get('/api/watermark', {
  params: { text: userInfo }
});
watermark.style.backgroundImage = `url(${serverWatermark.data})`;

水印样式优化

调整水印视觉效果：

降低透明度（opacity: 0.05-0.2）
使用斜体或特殊字体
增加文字间距
使用多重水印层叠

.watermark {
  opacity: 0.1;
  font-style: italic;
  letter-spacing: 2px;
}

响应式水印

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

methods: {
  adjustWatermark() {
    const density = window.innerWidth < 768 ? 100 : 200;
    canvas.width = density;
    // ...重绘逻辑
  }
},
mounted() {
  window.addEventListener('resize', this.adjustWatermark);
}