JavaScript：将base64解码为二进制数据

Question

我正在尝试使用 canvas 从视频创建图像，然后将图像发送到 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 数据：image/png;base64

[Link 到数据 ][1]:https://gist.github.com/anonymous/d357e780fa60b2c47490a9f795e34acf

当我尝试使用函数 atob 将数据解码为二进制时，出现以下错误：

Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

我不清楚 base64 数据的哪一部分格式不正确。

Answer 1

你必须切掉数据的头部url。当您将图像放入 image.src 时，其内容类似于 data:image/png;base64,BASE64ENCODEDSTUFF。显然 data:image/png;base64 不是 base64，所以用 atob 解码会失败。

Answer 2

这首先不起作用，因为 data-uri 由 header 组成，然后是 Base-64 数据 - atob() 只能处理 Base-64 部分。这意味着您需要切断 header ("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
}

JavaScript：将base64解码为二进制数据

JavaScript: Decode base64 into binary data

javascript

binary

base64