van-uploader上传图片前端添加水印

项目环境：js框架vue、UI框架vant、使用canvas实现前端上传图片时添加水印
html部分

<van-uploader v-model="verificationPicture.files" accept="image/*" max-count="1"
:after-read="addwater"/>

js部分

// 添加水印
      addwater(file){
        let img = document.createElement('img')
        img.src = file.content
        img.onload = () =>{               //图片加载后再添加水印，否则可能报错
            let width = img.width;
            let height = img.height;
            const canvas = document.createElement('canvas')
            canvas.width = width
            canvas.height = height
            const ctx = canvas.getContext('2d') // 绘制2d图形
            ctx.drawImage(img, 0, 0, width, height);
            var basePx=canvas.width;
            //字体大小  照片添加水印
            var fontSize=basePx/50;              //水印文字尺寸
            ctx