How to convert blob to base64?

Question

         axios
            .get(RequestURL, { responseType: 'blob', withCredentials: false })
            .then((response) => {
                let imageNode = document.getElementById('image')
                let imgUrl = window.URL.createObjectURL(response.data)
                console.log(imgUrl)
                setImageServer(imgUrl)
            })

            .catch(function (error) {
                // handle error
                console.log(error)
            })

Html

<img id='image' src={ImageServer} alt='Girl in a jacket' /> //getting an actual image(its working)

above all code is working..but the problem is converting that blob into base64

Goal:- I am trying to convert this blob to base64 so I can save it in local storage

What I have tried:-

var image = document.getElementById('image')
                console.log(image.src)  // blob:http://localhost:3000/1c012729-b104-4fb5-a9a5-39aa782860b4
                var reader = new FileReader()
                reader.readAsDataURL(image.src)
                reader.onloadend = function () {
                    var base64data = reader.result
                    console.log(base64data)
                }

By using this I am getting the error

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Yes, this is in react js, But It can easily be understood as normal js(only state is used)

I think this one can answer your question pretty well: [How can I convert an image into Base64 string using JavaScript?](https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript) — Alexis, May 05 '21 at 13:03

PhunkmasterP · Accepted Answer · 2021-05-05T15:10:46.450

1

Not knowing what the function setImageServer() does, it's probably because URL.createObjectURL() returns a DOMString (which is basically a string type):

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

https://developer.mozilla.org/en-US/docs/Web/API/DOMString

So your console.log is printing out a string representation of your blob object, not the blob itself. You could maybe try this to convert your DOMString to base64:

https://reference.codeproject.com/book/javascript/base64_encoding_and_decoding

edited May 05 '21 at 15:10

answered May 05 '21 at 13:06

PhunkmasterP

136
1
8

setImageServer() is react state – sanket kheni May 05 '21 at 13:08
gotcha, I see that now. Hopefully this answer helps solve your problem! – PhunkmasterP May 05 '21 at 13:09
Can you please add code for how to convert that dom string to base64? – sanket kheni May 05 '21 at 13:11
its in the above link, under 'The "Unicode Problem"' – PhunkmasterP May 05 '21 at 13:12
`var blob = b64EncodeUnicode(image.src)` and used into `reader.readAsDataURL(blob)` and got the same error – sanket kheni May 05 '21 at 13:19
I am also getting the output `YmxvYjpodHRwOi8vbG9jYWxob3N0OjMwMDAvMzZkNDkxNDYtN2RhYS00NGNjLWI3ZTEtYzZhZmY3YzE2N2Nj` but passing this base64 to the `readAsDataURL ` throwing the same error – sanket kheni May 05 '21 at 13:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231979/discussion-between-sanket-kheni-and-phunkmasterp). – sanket kheni May 05 '21 at 13:47

score 0 · Answer 2 · answered May 05 '21 at 14:32

The problem was I am using image.src rather than using direct response from the server like respone.data

this is the solution.

  axios
                .get(RequestURL, { responseType: 'blob', withCredentials: false })
                .then((response) => {
                    console.log(response.data)
                    let imgData = window.URL.createObjectURL(response.data)
                    setImageServer(imgData)
                    var reader = new FileReader()
    
                    reader.readAsDataURL(response.data)
                    reader.onloadend = function () {
                        var base64data = reader.result
                        console.log(base64data)
                    }
                })

How to convert blob to base64?

2 Answers2

Linked