当前位置：首页 > VUE

vue页面实现水印

2026-02-20 00:05:42VUE

添加静态水印

在Vue组件中使用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%;
  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="50%" y="50%" fill="gray" font-size="20" text-anchor="middle" transform="rotate(-45, 100, 100)">水印内容</text></svg>');
  pointer-events: none;
  z-index: 9999;
}
</style>

动态生成水印

使用Canvas动态生成水印并处理防删除逻辑：

export default {
  mounted() {
    this.createWatermark();
  },
  methods: {
    createWatermark() {
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;
      const ctx = canvas.getContext('2d');
      ctx.font = '16px Arial';
      ctx.fillStyle = 'rgba(128, 128, 128, 0.1)';
      ctx.rotate((-45 * Math.PI) / 180);
      ctx.fillText('保密信息', 50, 100);

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

      document.body.appendChild(watermarkDiv);

      // 防删除监听
      const observer = new MutationObserver(() => {
        if (!document.body.contains(watermarkDiv)) {
          document.body.appendChild(watermarkDiv);
        }
      });
      observer.observe(document.body, { childList: true });
    }
  }
}

使用第三方库

安装专业水印库如vue-watermark：

npm install vue-watermark-directive

在Vue项目中全局注册指令：

import Vue from 'vue';
import watermark from 'vue-watermark-directive';

Vue.directive('watermark', watermark);

组件中使用指令：

<template>
  <div v-watermark="{
    text: '内部使用',
    font: '16px Arial',
    fillStyle: 'rgba(0,0,0,0.1)',
    angle: -45
  }">
    <!-- 页面内容 -->
  </div>
</template>

响应式水印调整

监听窗口变化自动调整水印密度：

export default {
  data() {
    return {
      watermarkConfig: {
        text: '示例水印',
        density: this.calculateDensity()
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    calculateDensity() {
      return window.innerWidth < 768 ? 100 : 200;
    },
    handleResize() {
      this.watermarkConfig.density = this.calculateDensity();
    }
  }
}

多行水印实现

通过Canvas生成多行重复水印：

generateMultiLineWatermark() {
  const canvas = document.createElement('canvas');
  canvas.width = 400;
  canvas.height = 300;
  const ctx = canvas.getContext('2d');

  ctx.font = '14px Microsoft YaHei';
  ctx.fillStyle = 'rgba(100, 100, 100, 0.1)';
  ctx.textAlign = 'center';

  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 3; j++) {
      ctx.save();
      ctx.translate(80 + i * 80, 60 + j * 100);
      ctx.rotate(-45 * Math.PI / 180);
      ctx.fillText(`保密 ${i+1}-${j+1}`, 0, 0);
      ctx.restore();
    }
  }

  return canvas.toDataURL();
}

vue页面实现水印