How to convert base64 into binary stream using javascript? [duplicate]

Question

The uploading images API needs binary stream. I've tried new FileReader() and its readAsBinaryString() method, but it doesn't work! It seems that binary string and binary stream are not the same thing, so I changed my way and tried readAsDataURL() method (cause I need to preview images) and now I want to know:

1) how to convert base64 into binary stream using js?

When I use readAsBinaryString(),the respond is as follow (data A):

binary_string

But the API needs something like this (data B):

binary_stream

2) Anybody know how to convert dataA ( picture above ) into dataB ( picture down )?

"I've tried new FileReader() and its *readAsBinaryString()*method, but it doesn't work!" What do you mean by "binary stream"? — guest271314
– guest271314, Commented Sep 19, 2016 at 6:26
when you say "it doesn't work" - do you get errors in the console for example? — Jaromanda X
– Jaromanda X, Commented Sep 19, 2016 at 6:26
I'm having a hard time believing the api need a hex view (data B) when you say that the api needs a binary stream - which one is it? — Endless
– Endless, Commented Nov 10, 2016 at 15:19

Community · Accepted Answer · 2017-05-23 11:53:34Z

11

This is how you convert a base64 into binary stream

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

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

Note: This only works in Blink atm, could use Screw-FileReader and web-streams-polyfill to turn any blob into a byte stream if you like

But what i really think you wanna do is to turn a base64 into a blob (binary container) and then upload it to a api as binary (not as base64) if that is true then this is just a duplicate of Creating a Blob from a base64 string in JavaScript and then it's just a mather of sending it with ajax to a server

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})
})

Getting the base64 in the first place is really impractical and should be dealt with before using arrayBuffer, or blob
If you for example getting it from canvas - try using canvas.toBlob instead of toDataUrl

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Nov 10, 2016 at 15:37

Endless

38.7k14 gold badges118 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shawal Ahmad Khan Over a year ago

i am working on React Native App, fetch method is working fine for ios but not working for android! is there anything alternative to convert base64 into blob?

Collectives™ on Stack Overflow

How to convert base64 into binary stream using javascript? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related