vue实现水印效果

2026-02-18 18:35:55VUE

基础水印实现

通过CSS和Vue动态生成水印背景，适合简单场景。

<template>
  <div class="watermark-container">
    <!-- 内容区域 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    this.createWatermark('机密', 30, -15);
  },
  methods: {
    createWatermark(text, angle = 30, offset = -15) {
      const container = document.querySelector('.watermark-container');
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 150;
      const ctx = canvas.getContext('2d');

      ctx.font = '16px Arial';
      ctx.fillStyle = 'rgba(200, 200, 200, 0.2)';
      ctx.rotate((Math.PI / 180) * angle);
      ctx.fillText(text, offset, 80);

      container.style.backgroundImage = `url(${canvas.toDataURL()})`;
    }
  }
};
</script>

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

动态水印组件

封装可复用的水印组件，支持动态更新内容。

<template>
  <div ref="watermarkEl" class="watermark-wrapper">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    text: { type: String, default: 'Watermark' },
    opacity: { type: Number, default: 0.1 },
    fontSize: { type: Number, default: 16 }
  },
  watch: {
    text() { this.updateWatermark(); },
    opacity() { this.updateWatermark(); }
  },
  mounted() { this.updateWatermark(); },
  methods: {
    updateWatermark() {
      const el = this.$refs.watermarkEl;
      const canvas = document.createElement('canvas');
      canvas.width = 300;
      canvas.height = 200;
      const ctx = canvas.getContext('2d');

      ctx.font = `${this.fontSize}px sans-serif`;
      ctx.fillStyle = `rgba(0, 0, 0, ${this.opacity})`;
      ctx.rotate(-0.4);
      ctx.fillText(this.text, 20, 100);

      el.style.backgroundImage = `url(${canvas.toDataURL()})`;
    }
  }
};
</script>

防篡改水印方案

通过MutationObserver监测DOM修改，防止水印被删除。

// 在基础水印实现中增加以下代码
mounted() {
  this.createWatermark();
  this.observeWatermark();
},
methods: {
  observeWatermark() {
    const targetNode = document.querySelector('.watermark-container');
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(() => {
        if (!targetNode.style.backgroundImage.includes('data:image/png')) {
          this.createWatermark();
        }
      });
    });
    observer.observe(targetNode, { attributes: true });
  }
}

多行水印生成

扩展canvas绘制逻辑实现多行文本水印。

vue实现水印效果

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

  ctx.font = '14px Arial';
  ctx.fillStyle = 'rgba(120, 120, 120, 0.1)';
  ctx.rotate(-0.3);

  lines.forEach((line, index) => {
    ctx.fillText(line, 10, 50 + (index * 30));
  });

  this.$refs.container.style.backgroundImage = `url(${canvas.toDataURL()})`;
}