当前位置：首页 > VUE

vue实现水印效果

2026-01-18 02:08:40VUE

实现水印效果的几种方法

在Vue中实现水印效果可以通过多种方式，以下是几种常见的方法：

使用CSS背景图

通过CSS的background-image属性可以实现简单的水印效果。定义一个包含水印文本的SVG或PNG图像，将其设置为背景图。

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

<style>
.watermarked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><text x='50%' y='50%' font-size='20' fill='rgba(0,0,0,0.1)' text-anchor='middle' transform='rotate(-45, 100, 100)'>WATERMARK</text></svg>");
  background-repeat: repeat;
}
</style>

使用Canvas动态生成水印

通过Canvas动态生成水印，可以灵活调整水印内容、颜色、角度等属性。

vue实现水印效果

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

<script>
export default {
  mounted() {
    this.generateWatermark();
  },
  methods: {
    generateWatermark() {
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;
      const ctx = canvas.getContext('2d');
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.translate(100, 100);
      ctx.rotate(-Math.PI / 4);
      ctx.fillText('WATERMARK', 0, 0);

      const watermarkUrl = canvas.toDataURL();
      this.$refs.watermarkContainer.style.backgroundImage = `url(${watermarkUrl})`;
      this.$refs.watermarkContainer.style.backgroundRepeat = 'repeat';
    }
  }
}
</script>

使用第三方库

可以使用第三方库如vue-watermark来快速实现水印效果。

安装：

vue实现水印效果

npm install vue-watermark

使用：

<template>
  <vue-watermark :text="watermarkText" :opacity="0.1" :width="200" :height="200" :rotate="-45">
    <div>你的内容</div>
  </vue-watermark>
</template>

<script>
import VueWatermark from 'vue-watermark';

export default {
  components: {
    VueWatermark
  },
  data() {
    return {
      watermarkText: 'WATERMARK'
    };
  }
}
</script>

防止水印被移除

为了增强水印的防篡改性，可以通过MutationObserver监听DOM变化，确保水印被移除后能重新添加。

mounted() {
  this.generateWatermark();
  this.observeWatermark();
},
methods: {
  observeWatermark() {
    const targetNode = this.$refs.watermarkContainer;
    const config = { attributes: true, childList: true, subtree: true };
    const callback = (mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.type === 'childList' || mutation.type === 'attributes') {
          this.generateWatermark();
        }
      }
    };
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  }
}