base64的图片转成blob

base64的图片转成blob

const dataURLtoBlob = (dataurl) => {
  var arr = dataurl.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 Blob([u8arr], { type: mime })
}

var imgData = canvas.toDataURL('image/png');
    var blob = dataURLtoBlob(imgData);
    var file = new File([blob],new Date().getTime()+".png");

 

保存图片

// 保存并上传图片
const imgBox: any = ref(null)
const saveImage = async () => {
  console.log(imgBox.value)
  userCountList.value = [];
  loginedCountList.value = [];
  handledCountList.value = [];
  report.value.userCountFilePath = '';
  report.value.loginedCountFilePath = '';
  report.value.handledCountFilePath = '';


  await html2canvas(imgBox.value, {
    height: imgBox.value.scrollHeight,
    width: imgBox.value.scrollWidth,
  }).then((canvas) => {
    const link = document.createElement("a"); // 创建一个超链接对象实例
    link.download = "image.png"; // 设置要下载的图片的名称
    link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
    console.log(link.href)
    //link.click(); // 触发超链接的点击事件，将图片保存到本地

    //
    var imgData = canvas.toDataURL('image/png');
    var blob = dataURLtoBlob(imgData);
    var file = new File([blob],new Date().getTime()+".png");

    const formData = new FormData()
        formData.append('file', file)
        axios.post("api/YW/UploadFile", formData, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        }).then(response => {
          sqlShow.value = false;
          sqlLoading.value=false;
          userCountList.value.push({
            url: response.data.url,
            name: 'userCount',
          });
          loginedCountList.value.push({
            url: response.data.url,
            name: 'loginedCount',
          });
          handledCountList.value.push({
            url: response.data.url,
            name: 'handledCount',
          });
          report.value.userCountFilePath = response.data.url;
          report.value.loginedCountFilePath = response.data.url;
          report.value.handledCountFilePath = response.data.url;

        }).catch(error => {
          console.error(error);
        });
  

  });

}