前端vue加水印vant2+cavans

我使用的是vant2的Uploader 文件上传组件

    <van-uploader :max-count="9"  :after-read="afterReadImg" @delete="onDelete"
      v-model="fileList" @click-upload="setBannerMax"  multiple>
      <div class="upload flex flex-col" v-if="fileList.length < 9">
        <img class="add-img" src="@/assets/images/add_img.png" />
        <span v-if="!fileList.length">拍照上传</span>
        <span v-else>{{ fileList.length }}/9</span>
      </div>
    </van-uploader>

这里安卓和ios有很多兼容性问题，例如限制最大上传张数，这里调用的是原生的方法控制

  setBannerMax() {
      const bridge = getJsBridge()
      bridge.call('setMaxUploadSize', { size: 9 })
      // return true
    }

图片加水印一开始是后端实现，她实现的正常情况

 但如果是网图的话水印会有超出的情况，加上后端加水印会延长接口响应的时间，所以让前端实现

 后端网图超出情况

前端实现部分代码

 在上传之前调用添加水印的方法

  // 添加水印  //未调用
  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);
            let imgs1 = document.createElement('img')   //logo背景图片再创建一次画布
           imgs1.src =this.imgs1
           imgs1.onload = () =>{      
               //接下来的操作必须嵌套在最后一次创建画布的onload方法里面
            ctx.drawImage(imgs1, 0.04*width, height-0.51*width, 0.47*width,0.47*width );
                           //logo背景图片相对于整张图片的大小和位置
            let imgs2 = document.createElement('img') //创建logo里面的位置icon
           imgs2.src =this.imgs2
           imgs2.onload = () =>{
            ctx.drawImage(imgs2, 0.06*width, height-0.20*width, 0.04*width,0.04*width );
                               //位置icon相对于整张图片的大小和位置
            var basePx=canvas.width;
            //字体大小  照片添加水印
            var fontSize=0.08*width; 
            ctx.font= fontSize+"px Blob Georgia";
            ctx.fillStyle="#fff";
               //时间
               var date = new Date();
               let hour = date.getHours(),// 时
             minutes = date.getMinutes(); // 分
             if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
                   }
             if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
                }
           let   minute=hour+':'+minutes;
             ctx.fillText(minute,0.06*width,height-0.26*width)//文字（分）的位置
             let location='深圳市-深圳湾创新科技中心深圳市-深圳湾创新科技中心深圳市-深圳湾创新科技中心深圳市-深圳湾创新科技中心深圳市-深圳湾创新科技中心'  
                 //location是动态获取的因为pc端调试无法获取位置信息这里是写死的
             var fontSize=0.02*width; 
             var b=location;
	var _left=0.11*width;
	var _top=height-0.17*width;
	for (let i=0;i<b.length;i++){
		if(_left>0.45*width){
			_left=0.11*width
			_top+=30
			}
		_left+=20
    ctx.font= fontSize+"px normal Georgia";
		ctx.measureText(b[i]).width;
		ctx.fillSty1e= 'black' ;
		ctx.fillText(b[i],_left,_top)//文字（地理位置）的位置
      }  //位置信息超过两行的处理方法
               let day = date.getDay();          //  周一返回的是1，周六是6，但是周日是0
           let arr = [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六",];
            let base64 = canvas.toDataURL(file.file.type, 0.92);           //将canvas转为 
            base64编码
            console.log('添加水印后的图片',base64)
            //将base64转为图片
            this.fileWater=this.baseToImg(base64)
           }
           }
        }
      }

1.  这是写到一半的实现效果（因为催上线，最后并没有使用前端实现），没有logo超出问题，但是处理后的图片是base64的格式，如果要使用还得跟后端协调修改接口。总之对于我这种小白来说使用一点也算学到一点点cavans的使用，总之要添加多个icon或者背景图片就一层一层的嵌套onload方法，添加多个文字就多写几个fillText
2. 这篇文章主要是记录cavans的使用方法，代码不完全不可直接使用