html2canvas 生成base64图片 vue使用

1.引入 

import html2canvas from "html2canvas"

<div class="body-content" ref='creatImg'>
    这是要生成图片的区域
</div>

<button @click='saveImg'>保存</button>

saveImg(){
    //为避免出现位置偏移的情况，将滚动条置顶
    document.body.scrollTop = document.documentElement.scrollTop = 0
    html2canvas(this.$refs.creatImg,{scrollY:0}).then(canvas => {
　　　　　　let dataURL = canvas.toDataURL("image/png");
          this.uImgUrl = dataURL;  //生成的图片连接地址
          this.file =  dataURLtoFile(dataURL, `test-${new Date().getTime()}.png`)  //将图片转为fie 文件流 
    }）
    

}

2.将base 64图片生成为file流文件，如果需要将生成的图片传后台可使用此法

// // 图片base64格式转换成文件流格式
export function dataURLtoFile(base64File, filename){
    var arr = base64File.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}

写下该文章仅用于记录，如有不对的地方，望大神们不吝赐教