准备工作

在开始之前，请确保您的项目已经安装了Vue，并且您对Vue的基础语法有一定了解。

步骤1：创建水印函数

function addWatermark(content, imageUrl) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 设置canvas大小与图片相同
    canvas.width = document.getElementById(imageUrl).width;
    canvas.height = document.getElementById(imageUrl).height;

    // 绘制图片
    const img = new Image();
    img.onload = () => {
      ctx.drawImage(img, 0, 0);
      // 设置水印文字样式
      ctx.font = '14px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
      // 设置水印位置
      ctx.fillText(content, canvas.width - 100, canvas.height - 50);
      resolve(canvas.toDataURL());
    };
    img.src = imageUrl;
  });
}

步骤2：在Vue组件中使用水印

接下来，在您的Vue组件中，我们可以使用上述函数来添加水印。

<template>
  <div>
    <img :src="watermarkedImage" alt="Watermarked Image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.jpg',
      watermarkContent: 'Confidential',
      watermarkedImage: ''
    };
  },
  mounted() {
    this.addWatermark();
  },
  methods: {
    async addWatermark() {
      this.watermarkedImage = await addWatermark(this.watermarkContent, this.imageUrl);
    }
  }
};
</script>

步骤3：处理不同页面或组件的水印

在现实项目中，您可能需要在不同的页面或组件中添加不同内容的水印。这时，您可以将水印内容作为参数传递给addWatermark函数。

methods: {
  async addWatermark() {
    this.watermarkedImage = await addWatermark(this.watermarkContent, this.imageUrl);
  }
}

注意事项

  1. 确保图片路径正确，否则水印将无法添加。
  2. 如果图片较大，水印生成可能需要一些时间。
  3. 您可以根据需要调整水印文字的大小、颜色和透明度。