vue3项目中如何给图片添加水印文字

在Vue3项目中给图片添加水印文字的方法有多种，可以通过以下步骤实现。

第一步，引入水印文字图片和原始图片。

第二步，使用HTML5的canvas标签将原始图片绘制在画布上。

第三步，使用canvas绘制API，在绘制的原始图片上添加水印文字。

第四步，将添加水印文字后的画布转换为最终图片。

具体实现代码如下：

<template>
  <div class="watermark-container">
    <canvas ref="canvas" :width="imageWidth" :height="imageHeight"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '原始图片地址',
      watermarkText: '水印文字',
      imageWidth: 500,
      imageHeight: 500
    }
  },
  mounted() {
    this.drawWatermark()
  },
  methods: {
    drawWatermark() {
      const canvas = this.$refs.canvas
      const context = canvas.getContext('2d')
      const image = new Image()

      image.onload = () => {
        context.drawImage(image, 0, 0, this.imageWidth, this.imageHeight)
        context.font = '20px Arial'
        context.fillStyle = 'rgba(255, 255, 255, 0.6)'
        context.fillText(this.watermarkText, 20, 40)
        this.convertToImage(canvas)
      }
      image.src = this.imageUrl
    },
    convertToImage(canvas) {
      const image = new Image()
      image.src = canvas.toDataURL('image/png')
      document.body.appendChild(image)
    }
  }
}
</script>

以上就是在Vue3项目中给图片添加水印文字的简单实现方法。当然也可以使用第三方库帮助实现更加复杂的水印效果。