vant watermark

根据提供的引用内容，vant并没有提供直接添加水印的组件或方法。但是可以通过上传图片后将图片转成base64格式，再通过canvas将水印添加到图片上，最后将添加水印后的图片转成文件并上传。具体实现步骤如下：

1.使用vant的上传组件上传图片，并将图片转成base64格式。

<van-uploader
  v-model="fileList"
  :after-read="onRead"
  accept="image/*"
  :max-count="1"
>
  <van-button icon="photo-o">上传图片</van-button>
</van-uploader>

// methods中的onRead方法
onRead(file) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    // 将图片转成base64格式
    const base64Img = reader.result;
    // 调用添加水印的方法
    this.addWatermark(base64Img);
  };
},

2.添加水印的方法，使用canvas将水印添加到图片上。

addWatermark(base64Img) {
  const canvas = document.createElement('canvas');
  const img = new Image();
  img.src = base64Img;
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    ctx.font = '20px Arial';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fillText('watermark', 10, 50); // 添加水印
    const base64 = canvas.toDataURL('image/jpeg', 0.8); // 将canvas转成base64格式
    const file = this.dataURLtoFile(base64, 'watermark.jpg'); // 将base64格式转成文件
    // 上传添加水印后的图片
    this.upload(file);
  };
},

3.将base64格式转成文件的方法。

dataURLtoFile(dataurl, filename) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
},

4.上传添加水印后的图片的方法。

upload(file) {
  const formData = new FormData();
  formData.append('file', file);
  // 调用上传接口上传文件
  // ...
},