canvas使用及转换base64+上传图片

<div>
    // html中添加canvas标签加上id
  <canvas id="canvas" width="126" height="126"></canvas>
</div>

// 事件名
createdCanvas(){
   let that = this;
   // 通过id获取canvas标签
   let canvas = document.getElementById('canvas');
   let ctx = canvas.getContext('2d');
   // 新增图片
   let image = new Image()
   //图片的url
   image.src = url;
   
   // 图片加载完回调
   image.onload = function() {
    // 设置背景图，不要背景图就不设置
    ctx.drawImage(this, 0, 0, 126, 126)

    //fillStyle 设置字体颜色
    ctx.fillStyle = '#ffffff';

    // textAlign 设置文字居中
    ctx.textAlign = "center"

    //font 设置文字大小
    ctx.font = "16px Calibri";
    
    //fillText 将文字绘制到画布中，'文字'，'x轴位置',y轴位置
    ctx.fillText('文字', 63, 60);

    //设置多一张图片在背景图上面显示
    let image2 = new Image()
    image2 .src = url;
    image2 .onload = function () {
        //将图片绘制到画布上
        ctx.drawImage(image2 , 0, 0, 126, 126)
        
        // 通过toDataURL保存图片，格式是base64格式的。
        let imageUrl = canvas.toDataURL('image/png');
        
        // 调用新增转换方法base64toFile
        // 转换后调用后端接口上传FormData文件流
        that.compositeEditImg(that.base64toFile(imageUrl,'file'));
      }
   }
},

//上传图片
compositeEditImg(url, arr){
    let formData = new FormData();
    // url是base64转换了的文件流
    formData.append("file", url);
    axios.post("/file/upload", formData).then(res =>{
        console.log(res)
    })
},

//新增base64图片转换
 base64toFile(data, fileName) {
    const dataArr = data.split(",");
    const byteString = atob(dataArr[1]);
    const options = {
    type: "image/jpeg",
    endings: "native"
  };
   const u8Arr = new Uint8Array(byteString.length);
   for (let i = 0; i < byteString.length; i++) {
     u8Arr[i] = byteString.charCodeAt(i);
   }
   return new File([u8Arr], fileName + ".jpg", options);//返回文件流
},