圖片url,base64,blob,file互轉

• url 轉 base64 原理： 利用canvas.toDataURL的API轉化成base64

urlToBase64(url) {
      return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
          let canvas = document.createElement('canvas');
          canvas.width = this.naturalWidth;
          canvas.height = this.naturalHeight;
          // 將圖片插入畫布並開始繪製
          canvas.getContext('2d').drawImage(image, 0, 0);
          // result
          let result = canvas.toDataURL('image/png')
          resolve(result);
        };
        // CORS 策略，會存在跨域問題https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 圖片加載失敗的錯誤處理
        image.onerror = () => {
          reject(new Error('urlToBase64 error'));
      };
    }

調用

let imgUrL = `http://XXX.jpg`
urlToBase64(imgUrL).then(res => {
  // 轉化後的base64圖片地址
  console.log('base64', res)
})

• base64 轉 blob 原理：利用URL.createObjectURL爲blob對象創建臨時的URL

base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {
  return new Promise((resolve, reject) => {
    // 使用 atob() 方法將數據解碼
    let byteCharacters = atob(b64data);
    let byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      let slice = byteCharacters.slice(offset, offset + sliceSize);
      let byteNumbers = [];
      for (let i = 0; i < slice.length; i++) {
          byteNumbers.push(slice.charCodeAt(i));
      }
      // 8 位無符號整數值的類型化數組。內容將初始化爲 0。
      // 如果無法分配請求數目的字節，則將引發異常。
      byteArrays.push(new Uint8Array(byteNumbers));
    }
    let result = new Blob(byteArrays, {
      type: contentType
    })
    result = Object.assign(result,{
      // 這裏一定要處理一下 URL.createObjectURL
      preview: URL.createObjectURL(result),
      name: `XXX.png`
    });
    resolve(result)
  })
 }

調用

let base64 = base64.split(',')[1]
base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {
  // 轉後後的blob對象
  console.log('blob', res)
})

• blob 轉 base64 原理：利用fileReader的readAsDataURL，將blob轉爲base64

blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'));
    };
  });
}

調用

blobToBase64(blob).then(res => {
  // 轉化後的base64
  console.log('base64', res)
})

• base64轉file

dataURLtoFile (dataURI, type) {
	      // btoa和atob是window對象的兩個函數，其中btoa是binary to ascii，用於將binary的數據用ascii碼錶示，即Base64的編碼過程，而atob則是ascii to binary，用於將ascii碼解析成binary數據
	      let binary = atob(dataURI.split(',')[1]);
	      let array = [];
	      for (let i = 0; i < binary.length; i++) {
	        array.push(binary.charCodeAt(i));
	
	      }
	      let fileData = new Blob([new Uint8Array(array)], {
	        type: type
	      });
	      let fileOfBlob = new File([fileData], new Date() + '.png'); // 重命名了
	      return fileOfBlob;
	    },