如何使用javascript将base64转换为二进制流？

Question

上传图片API需要二进制流。我尝试了新的FileReader()及其readAsBinaryString()方法，但它不起作用！似乎二进制字符串和二进制流不是一回事，所以我改变了方式并尝试了readAsDataURL()方法（因为我需要预览图像），现在我想知道：

1）如何使用 js 将base64转换为二进制流？

当我使用readAsBinaryString()时，回复如下（数据A）：

但API需要这样的东西（数据B）：

2）有人知道如何将dataA（上图）转换为dataB（图片向下）吗？

Answer 1

这是将base64转换为二进制流

的方法

var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(base64)
.then(res => {
  console.log(res.body instanceof ReadableStream)
})

注意：这仅适用于Blink atm，可以使用Screw-FileReader和web-streams-polyfill将任何blob转换为字节流，如果您愿意

但我真的认为你想做的是将base64转换为blob（二进制容器），然后将其作为二进制文件（而不是base64）上传到api，如果这是真的那么这只是{{{ 3}}然后它只是将它与ajax一起发送到服务器

var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(base64)
.then(res => res.blob())
.then(blob => {
  console.log("here is your binary: ", blob)

  // now upload it
  fetch(api, {method: 'POST', body: blob})
})

首先获取base64实际上是不切实际的，应该在使用arrayBuffer或blob之前处理。如果你从画布中获取它 - 尝试使用canvas.toBlob而不是{{1} }