当前位置：首页 > VUE

vue实现水印

2026-01-07 20:21:46VUE

Vue 实现水印的方法

使用 CSS 背景图

通过 CSS 的 background-image 和 background-repeat 属性实现水印效果。创建一个包含水印文本的 Canvas，将其转换为 base64 图片，设置为背景。

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

<script>
export default {
  mounted() {
    this.generateWatermark();
  },
  methods: {
    generateWatermark() {
      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.5)';
      ctx.rotate(-0.2);
      ctx.fillText('Watermark', 10, 80);
      const watermarkUrl = canvas.toDataURL('image/png');

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

<style>
.watermark-container {
  width: 100%;
  height: 100vh;
}
</style>

使用自定义指令

通过 Vue 的自定义指令实现动态水印，适用于需要动态更新水印内容的场景。

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

<script>
export default {
  data() {
    return {
      watermarkText: 'Confidential'
    };
  },
  directives: {
    watermark: {
      inserted(el, binding) {
        const canvas = document.createElement('canvas');
        canvas.width = 200;
        canvas.height = 150;
        const ctx = canvas.getContext('2d');
        ctx.font = '16px Arial';
        ctx.fillStyle = 'rgba(100, 100, 100, 0.2)';
        ctx.rotate(-0.2);
        ctx.fillText(binding.value, 10, 80);
        const watermarkUrl = canvas.toDataURL('image/png');

        el.style.backgroundImage = `url(${watermarkUrl})`;
        el.style.backgroundRepeat = 'repeat';
      }
    }
  }
};
</script>

使用第三方库

可以借助第三方库如 vue-watermark 快速实现水印功能。

安装库：

npm install vue-watermark

使用示例：

<template>
  <vue-watermark :text="watermarkText" :opacity="0.3" :width="200" :height="150">
    <div>Your content here</div>
  </vue-watermark>
</template>

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

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

动态更新水印

如果需要动态更新水印内容，可以通过监听数据变化重新生成水印。

<template>
  <div ref="watermarkEl"></div>
  <button @click="updateWatermark">Update Watermark</button>
</template>

<script>
export default {
  data() {
    return {
      watermarkText: 'Initial Watermark'
    };
  },
  mounted() {
    this.applyWatermark();
  },
  methods: {
    applyWatermark() {
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 150;
      const ctx = canvas.getContext('2d');
      ctx.font = '16px Arial';
      ctx.fillStyle = 'rgba(150, 150, 150, 0.3)';
      ctx.rotate(-0.2);
      ctx.fillText(this.watermarkText, 10, 80);
      const watermarkUrl = canvas.toDataURL('image/png');

      this.$refs.watermarkEl.style.backgroundImage = `url(${watermarkUrl})`;
      this.$refs.watermarkEl.style.backgroundRepeat = 'repeat';
    },
    updateWatermark() {
      this.watermarkText = 'Updated Watermark';
      this.applyWatermark();
    }
  }
};
</script>

vue实现水印