image, blob, File, base64互相轉換方法

//將image url、blob url等轉化為blob對象
async function urlToBlob (url) {
  return new Promise((resolve,reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
      if(this.status == 200 || this.status === 0){
        // 注意這里的this.response 是一個blob對象 就是文件對象
        resolve(this.response)
      }
      else{
        reject(null)
      }
    }
    xhr.send();
  })
}

//將base64轉換為blob
function base64toBlob(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 });
}

//將blob轉換為file
function blobToFile(theBlob, fileName){
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}

//file轉base64
async function fileToBase64(file){
  return new Promise((resolve,reject) => {
    let reader=new FileReader();
    reader.readAsDataURL(file);
    reader.onload=function(e){
      resolve(this.result);
    }
    reader.error=function(){
      reject(this.error);
    }
  })
}

//image轉base64
function imgToBase64(img,mime="image/png"){
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext("2d");
  img.crossOrigin= 'anonymous';
  ctx.drawImage(img, 0, 0, img.width, img.height);
  delete img.crossOrigin;
  let dataURL = canvas.toDataURL(mime);
  return dataURL
}