用 vuejs 封装一个可以给图片添加自定义水印组件

好的，我可以为您提供一些关于用Vue.js封装自定义水印组件的指导。

首先，您可以使用Vue.js的组件化思想来封装这个自定义水印组件。可以创建一个名为"Watermark"的Vue组件，在其中包含一个img标签用于显示图片，以及一个canvas标签用于绘制水印。在created生命周期中，获取到图片的资源并将其绘制到canvas上，接着在mounted生命周期中绘制水印，并使用canvas.toDataURL()获取带有水印的图片地址。

以下是一个示例代码，供您参考:

<template>
  <div>
    <canvas ref="canvas" width="300" height="200"></canvas>
    <img :src="imageWithWatermark"/>
  </div>
</template>

<script>
export default {
  props: {
    imageSrc: String,  // 传入图片地址
    watermarkText: String  // 传入水印文字
  },
  data() {
    return {
      imageWithWatermark: ""  // 带有水印的图片地址
    };
  },
  created() {
    // 获取图片资源，初始化canvas
    this.image = new Image();
    this.image.src = this.imageSrc;
    this.image.onload = () => {
      this.ctx = this.$refs.canvas.getContext("2d");
      this.ctx.drawImage(this.image, 0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    };
  },
  mounted() {
    // 绘制水印
    this.ctx.font = "20px serif";
    this.ctx.fillStyle = "rgba(100, 100, 100, 0.5)";
    this.ctx.rotate(-Math.PI / 4);
    this.ctx.fillText(this.watermarkText, -120, 150);
    // 获取带有水印的图片
    this.imageWithWatermark = this.$refs.canvas.toDataURL();
  }
};
</script>

在使用时，只需要传入图片地址和水印文字即可:

<template>
  <div>
    <Watermark :imageSrc="imageSrc" watermarkText="Custom Watermark"/>
  </div>
</template>

<script>
import Watermark from "@/components/Watermark";

export default {
  components: { Watermark },
  data() {
    return {
      imageSrc: "http://example.com/image.jpg"  // 图片地址
    };
  }
};
</script>

当然，以上代码只是示例，实际使用时还可以进行优化和扩展，例如自定义水印的颜色、位置等。希望对您有所帮助。