当前位置：首页 > VUE

vue实现水印

2026-01-12 22:09:22VUE

添加静态水印

在Vue中可以通过CSS或Canvas实现静态水印。CSS方式适合简单文字水印，Canvas适合复杂图形或自定义样式。

CSS方式
通过绝对定位和透明度控制，将水印覆盖在页面上：

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

<style>
.watermark-container {
  position: relative;
}
.watermark {
  position: absolute;
  opacity: 0.5;
  font-size: 24px;
  color: #999;
  transform: rotate(-15deg);
  pointer-events: none; /* 防止水印拦截点击事件 */
  z-index: 9999;
}
</style>

Canvas方式
使用Canvas绘制水印并作为背景图，支持多行文字或复杂图案：

<template>
  <div :style="{ backgroundImage: `url(${watermarkDataUrl})` }"></div>
</template>

<script>
export default {
  data() {
    return {
      watermarkDataUrl: ''
    };
  },
  mounted() {
    this.generateWatermark();
  },
  methods: {
    generateWatermark() {
      const canvas = document.createElement('canvas');
      canvas.width = 300;
      canvas.height = 200;
      const ctx = canvas.getContext('2d');
      ctx.font = '16px Arial';
      ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
      ctx.rotate(-0.2);
      ctx.fillText('Confidential', 50, 100);
      this.watermarkDataUrl = canvas.toDataURL('image/png');
    }
  }
};
</script>

动态水印（防篡改）

为防止用户通过开发者工具删除水印，可结合MutationObserver监听DOM变化，自动重新插入水印。

<template>
  <div ref="watermarkWrapper"></div>
</template>

<script>
export default {
  mounted() {
    this.initWatermark();
    this.observeWatermark();
  },
  methods: {
    initWatermark() {
      const watermark = document.createElement('div');
      watermark.className = 'dynamic-watermark';
      watermark.innerHTML = 'Dynamic Watermark';
      this.$refs.watermarkWrapper.appendChild(watermark);
    },
    observeWatermark() {
      const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
          if (!document.querySelector('.dynamic-watermark')) {
            this.initWatermark();
          }
        });
      });
      observer.observe(this.$refs.watermarkWrapper, {
        childList: true,
        subtree: true
      });
    }
  }
};
</script>

全屏水印覆盖

适用于管理系统等需要全局水印的场景，通过Vue指令实现：

// 全局指令定义
Vue.directive('watermark', {
  inserted(el, binding) {
    const { text, fontSize, color } = binding.value || {};
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 150;
    const ctx = canvas.getContext('2d');
    ctx.font = `${fontSize || '14px'} Arial`;
    ctx.fillStyle = color || 'rgba(0, 0, 0, 0.1)';
    ctx.rotate(-0.3);
    ctx.fillText(text || 'Default Watermark', 10, 80);

    el.style.backgroundImage = `url(${canvas.toDataURL()})`;
    el.style.backgroundRepeat = 'repeat';
  }
});

// 使用方式
<template>
  <div v-watermark="{ text: 'Secret', fontSize: '18px', color: 'rgba(100, 100, 100, 0.2)' }"></div>
</template>

响应式水印调整

监听窗口变化时重新计算水印位置或密度：

export default {
  methods: {
    handleResize() {
      window.addEventListener('resize', this.debounce(() => {
        this.generateWatermark(); // 重新生成Canvas水印
      }, 200));
    },
    debounce(fn, delay) {
      let timer;
      return () => {
        clearTimeout(timer);
        timer = setTimeout(fn, delay);
      };
    }
  }
};

vue实现水印