Vue 中给图片添加水印的方法

在 Vue 项目开发中，为图片添加水印是一个常见的需求，它可以起到版权保护、标识信息等作用。接下来我们就探讨一下在 Vue 里实现这一功能的几种方法。

使用 Canvas 绘制水印

Canvas 是 HTML5 新增的一个元素，提供了强大的绘图功能。我们可以利用它来生成带有水印的图片。在 Vue 组件中创建一个 Canvas 元素，并获取其绘图上下文。然后，加载需要添加水印的图片。图片加载完成后，在 Canvas 上绘制图片。接着，使用绘图上下文的相关方法绘制水印文字，例如设置字体、颜色、位置等属性。最后，将 Canvas 生成的图片数据转换为 URL 格式，就可以在页面中展示带有水印的图片了。

<template>
  <div>
    <canvas id="watermarkCanvas" ref="watermarkCanvas"></canvas>
    <img :src="watermarkedImageUrl" alt="Watermarked Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      watermarkedImageUrl: ''
    };
  },
  mounted() {
    this.addWatermark();
  },
  methods: {
    async addWatermark() {
      const canvas = this.$refs.watermarkCanvas;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = 'your-image-url.jpg';
      await new Promise((resolve) => img.onload = resolve);
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
      ctx.fillText('水印文字', 10, 30);
      this.watermarkedImageUrl = canvas.toDataURL('image/jpeg');
    }
  }
};
</script>

使用 CSS 滤镜实现简单水印

如果水印需求较为简单，只是添加一个半透明的文字层作为水印，可以使用 CSS 滤镜来实现。通过创建一个包含图片和水印文字的容器，设置容器的 position 为 relative，图片的 position 为 absolute，并覆盖整个容器。然后添加一个 div 用于显示水印文字，设置其 position 为 absolute，并调整样式使其呈现水印效果。

<template>
  <div class="watermark-container">
    <img src="your-image-url.jpg" alt="Image">
    <div class="watermark-text">水印文字</div>
  </div>
</template>

<style scoped>
.watermark-container {
  position: relative;
  display: inline-block;
}
.watermark-container img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.watermark-text {
  position: absolute;
  top: 10px;
  left: 10px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 20px;
  z-index: 1;
}
</style>

以上两种方法各有优劣，Canvas 绘制水印更加灵活，可以实现复杂的水印效果；而 CSS 滤镜实现简单水印则更为便捷，适合一些基础的水印需求。在实际项目中，开发者可以根据具体需求选择合适的方法来为图片添加水印。