Vue水印处理技巧：告别模糊，让水印清晰可见

1. 使用Canvas添加图片水印

<template>
  <div>
    <canvas ref="watermarkCanvas"></canvas>
    <img ref="targetImage" src="example.jpg" alt="Example Image" @load="addWatermark" />
  </div>
</template>

<script>
export default {
  methods: {
    addWatermark() {
      const canvas = this.$refs.watermarkCanvas;
      const img = this.$refs.targetImage;
      const ctx = canvas.getContext('2d');

      // 设置canvas大小与图片相同
      canvas.width = img.width;
      canvas.height = img.height;

      // 绘制图片
      ctx.drawImage(img, 0, 0);

      // 添加图片水印
      this.addImageWatermark(ctx, canvas);
    },
    addImageWatermark(ctx, canvas) {
      const watermarkImage = new Image();
      watermarkImage.src = 'watermark.png';

      watermarkImage.onload = () => {
        // 设置水印位置和大小
        const x = (canvas.width - watermarkImage.width) / 2;
        const y = (canvas.height - watermarkImage.height) / 2;

        // 绘制水印
        ctx.drawImage(watermarkImage, x, y);
      };
    }
  }
};
</script>

2. 使用CSS样式增强水印可见性

除了使用Canvas，您还可以通过CSS样式来增强水印的可见性。以下是一个使用CSS添加文字水印的示例：

<template>
  <div class="watermarked-image">
    <img src="example.jpg" alt="Example Image" />
  </div>
</template>

<style>
.watermarked-image img {
  position: relative;
}

.watermarked-image img::after {
  content: '© 2023 Your Company';
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
</style>

3. 使用Vue Watermark-DOM库

Vue Watermark-DOM是一个基于DOM的水印库，它提供了简单易用的API来添加水印。以下是如何使用Vue Watermark-DOM的示例：

<template>
  <div>
    <watermark :text="'© 2023 Your Company'" :x="10" :y="10" :color="'rgba(255, 255, 255, 0.5)'" />
    <img src="example.jpg" alt="Example Image" />
  </div>
</template>

<script>
import Watermark from 'vue-watermark-dom';

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

4. 注意事项

• 确保水印的透明度适中，以避免干扰图片内容。
• 根据图片内容和尺寸调整水印的大小和位置。
• 使用Canvas或CSS添加水印时，注意兼容性和性能问题。

通过以上技巧，您可以在Vue项目中轻松实现清晰可见的水印效果。这不仅增强了版权保护和隐私保护，还能提升用户体验。