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 将数据解码为二进制时，我收到以下错误：

错误：无法在'Window'上执行'atob'：要解码的字符串没有正确编码。

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

Answer 1

你必须削减数据网址的头部。当您将图像放入image.src时，其内容就像data:image/png;base64,BASE64ENCODEDSTUFF。显然data:image/png;base64不是base64所以用atob解码它会失败。

Answer 2

这首先不会起作用，因为数据uri包含一个标题，然后是Base-64数据 - atob（）只能处理Base-64部分。这意味着您需要切断标题（＆＃34;数据：image / png; base64，＆＃34;）。

但是通过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解码为二进制数据

3 个答案: