当前位置：首页 > article >正文

vue结合canvas动态生成水印效果

article 2024/12/5 10:46:16

在 Vue 项目中添加水印可以通过以下几种方式实现：

方法一：使用 CSS

直接通过 CSS 的 background 属性实现水印：

实现步骤

在需要添加水印的容器中设置背景。
使用 rgba 设置透明度，并通过 background-repeat 和 background-size 实现重复。

示例代码

<template>
  <div class="watermark-container">
    <p>这是带水印的内容。</p>
  </div>
</template>

<style>
.watermark-container {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="20" y="100" font-size="20" fill="rgba(0,0,0,0.2)" transform="rotate(-45)">Watermark</text></svg>');
  background-repeat: repeat;
}
</style>

方法二：通过 Canvas 动态生成水印

使用 Canvas 动态生成水印，并将其作为背景图应用。

实现步骤

在 Vue 中创建一个方法，通过 canvas 动态生成水印图。
将生成的图像作为背景图应用到需要添加水印的元素上。

示例代码

<template>
  <div class="watermark-container" :style="{ backgroundImage: watermark }">
    <p>这是带水印的内容。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      watermark: '',
    };
  },
  mounted() {
    this.generateWatermark();
  },
  methods: {
    generateWatermark() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      canvas.width = 200;
      canvas.height = 200;

      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.translate(100, 100);
      ctx.rotate((-45 * Math.PI) / 180);
      ctx.fillText('Watermark', 0, 0);

      this.watermark = `url(${canvas.toDataURL('image/png')})`;
    },
  },
};
</script>

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

方法三：封装水印组件

如果需要复用，可以封装一个通用的水印组件。

示例代码

<template>
  <div class="watermark" :style="{ backgroundImage: watermark }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Watermark',
    },
    fontSize: {
      type: String,
      default: '20px',
    },
    color: {
      type: String,
      default: 'rgba(0, 0, 0, 0.2)',
    },
    rotate: {
      type: Number,
      default: -45,
    },
  },
  data() {
    return {
      watermark: '',
    };
  },
  mounted() {
    this.generateWatermark();
  },
  methods: {
    generateWatermark() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      canvas.width = 200;
      canvas.height = 200;

      ctx.font = `${this.fontSize} Arial`;
      ctx.fillStyle = this.color;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.translate(100, 100);
      ctx.rotate((this.rotate * Math.PI) / 180);
      ctx.fillText(this.text, 0, 0);

      this.watermark = `url(${canvas.toDataURL('image/png')})`;
    },
  },
};
</script>

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

使用：

<template>
  <div>
    <Watermark text="Confidential" color="rgba(255,0,0,0.1)">
      <p>这是机密内容。</p>
    </Watermark>
  </div>
</template>

<script>
import Watermark from './Watermark.vue';

export default {
  components: {
    Watermark,
  },
};
</script>

在这里插入图片描述