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 });
}

寫下該文章僅用於記錄，如有不對的地方，望大神們不吝賜教