JavaScript：將 base64 解碼為二進制數據

Question

我正在嘗試使用畫布從視頻創建圖像，然后將圖像發送到 API。

這是我的代碼（為簡潔起見省略了大部分）

      var image = new Image();
        image.src = canvas.toDataURL("image/png");

      var newFile = new File([atob(image.src)], lorem.png, {
         type: "image/png",
          lastModified: Date.now()
         })

image.src 是一個長字符串，格式似乎是 base64 data:image/png;base64

[數據鏈接][1]： https : //gist.github.com/anonymous/d357e780fa60b2c47490a9f795e34acf

當我嘗試使用函數atob將數據解碼為二進制時，出現以下錯誤：

錯誤：無法在“窗口”上執行“atob”：要解碼的字符串未正確編碼。

我不清楚 base64 數據的哪一部分格式不正確。

Answer 1

您必須削減數據URL的頭部。 將圖像放入image.src時，其內容類似於data:image/png;base64,BASE64ENCODEDSTUFF 。 顯然data:image/png;base64不是base64，因此使用atob對其進行解碼將失敗。

Answer 2

這首先不會起作用，因為data-uri由標頭組成，然后由Base-64數據組成-atob（）僅能處理Base-64部分。 這意味着您需要剪切標題（“ data：image / png; base64”）。

但是，通過Data-URI進行比較慢，並且浪費了過多的內存。 直接使用Blob-方法如下：

var img = new Image();

canvas.toBlob(function(blob) {
  var newFile = new File([blob], "lorem.png", {type: "image/png"});
  img.src = (URL || webkitURL).createObjectURL(blob);
  // ...
});

Answer 3

這是我將 Base64 類型圖像轉換為二進制文件的解決方案。 這也可以處理其他類型的文件。

export const dataType64toFile = (dataurl, filename = "NewFile") => {
  //Convert base64 to file
  let 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)
  }
  let newFile = new File([u8arr], filename, {
    type: mime,
  })
  return newFile
}