vue实现水印效果

使用CSS背景图实现水印

在Vue中可以通过CSS的background-image属性添加水印。创建一个包含水印文本的Canvas元素，将其转换为DataURL后设置为背景。

<template>
  <div class="watermarked-container"></div>
</template>

<script>
export default {
  mounted() {
    this.setWatermark('机密文件', 'rgba(200,200,200,0.3)');
  },
  methods: {
    setWatermark(text, color) {
      const canvas = document.createElement('canvas');
      canvas.width = 300;
      canvas.height = 200;
      const ctx = canvas.getContext('2d');
      ctx.font = '20px Arial';
      ctx.fillStyle = color;
      ctx.rotate(-0.4);
      ctx.fillText(text, 50, 100);

      const container = document.querySelector('.watermarked-container');
      container.style.backgroundImage = `url(${canvas.toDataURL()})`;
      container.style.backgroundRepeat = 'repeat';
    }
  }
}
</script>

通过自定义指令实现全局水印

创建Vue自定义指令可以在多个组件中复用。指令会在元素上添加水印DOM节点。

// main.js
Vue.directive('watermark', {
  inserted(el, binding) {
    const { text, color } = binding.value;
    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(${createWatermarkCanvas(text, color)})`;
    watermark.style.backgroundRepeat = 'repeat';

    el.style.position = 'relative';
    el.appendChild(watermark);
  }
});

function createWatermarkCanvas(text, color) {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 150;
  const ctx = canvas.getContext('2d');
  ctx.font = '16px Arial';
  ctx.fillStyle = color || 'rgba(180,180,180,0.3)';
  ctx.rotate(-0.3);
  ctx.fillText(text, 30, 80);
  return canvas.toDataURL();
}

动态更新水印内容

结合Vue的响应式特性，可以通过watch监听水印内容变化。

<template>
  <div v-watermark="watermarkConfig"></div>
</template>

<script>
export default {
  data() {
    return {
      watermarkConfig: {
        text: '初始水印',
        color: 'rgba(200,200,200,0.5)'
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.watermarkConfig = {
        text: '更新后的水印',
        color: 'rgba(150,150,150,0.7)'
      };
    }, 3000);
  }
}
</script>

防止水印被删除

通过MutationObserver监控水印DOM变化，防止用户通过开发者工具删除水印。

Vue.directive('watermark', {
  inserted(el, binding) {
    const observer = new MutationObserver((mutations) => {
      const watermarkExist = el.querySelector('.watermark');
      if (!watermarkExist) {
        createWatermark(el, binding.value);
      }
    });
    observer.observe(el, { childList: true });
    createWatermark(el, binding.value);
  }
});

function createWatermark(el, { text, color }) {
  // 创建水印元素的实现代码
}

使用SVG实现高清水印

SVG水印在Retina屏幕上显示更清晰，适合高分辨率场景。

function createSvgWatermark(text) {
  const svg = `
    <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
      <text x="50" y="100" 
            font-family="Arial" 
            font-size="20" 
            fill="rgba(200,200,200,0.3)"
            transform="rotate(-30 100,100)">
        ${text}
      </text>
    </svg>`;
  return `data:image/svg+xml;base64,${btoa(svg)}`;
}

以上方法可以根据实际需求选择或组合使用，CSS背景图适合简单场景，自定义指令提供更好的复用性，MutationObserver增强安全性，SVG则提供更好的显示效果。