vue 在el-image上加水印

以下是使用canvas实现在el-image上加水印的方法：

// 在Vue组件中引入以下代码
methods: {
  addWatermark() {
    // 获取原始图片和水印图片的URL
    const img = new Image();
    img.src = this.src; // 原始图片URL
    const watermarkImg = new Image();
    watermarkImg.src = this.watermarkSrc; // 水印图片URL

    // 创建canvas元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 等待图片加载完成后进行操作
    img.onload = function() {
      // 设置canvas的宽高和图片一致
      canvas.width = img.width;
      canvas.height = img.height;

      // 将原始图片绘制到canvas上
      ctx.drawImage(img, 0, 0);

      // 将水印图片绘制到canvas上
      ctx.drawImage(watermarkImg, 0, 0);

      // 将canvas转换为blob文件的URL
      canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        // 将生成的URL赋值给el-image的src属性
        this.src = url;
      });
    };
  }
}

在上述代码中，我们首先获取了原始图片和水印图片的URL，然后创建了一个canvas元素，并将原始图片和水印图片绘制到canvas上。最后将canvas转换为blob文件的URL，并将其赋值给el-image的src属性，即可在el-image上展示加过水印的图片。