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

【问题标题】：JavaScript: Decode base64 into binary dataJavaScript：将 base64 解码为二进制数据
【发布时间】：2017-07-14 00:51:24
【问题描述】：

我正在尝试使用画布从视频创建图像，然后将图像发送到 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 将数据解码为二进制时，我收到以下错误：

Error: Failed to execute 'atob' on 'Window': 要解码的字符串编码不正确。

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

【问题讨论】：

标签： javascript binary base64

【解决方案1】：

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

【讨论】：

【解决方案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);
  // ...
});

【讨论】：

【解决方案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
}

【讨论】：