How to base64 encode binary image in JS for browser showing

Question

We have a problem with showing in browser (actually Chrome) binary images receiving from REST backend API. The backend REST endpoint defined in Java like this

@GetMapping(path = "/images/{imageId:\\d+}/data", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public @ResponseBody byte[] getImageData(@PathVariable long imageId) {
    return ... skipped ...
}

On the frontend we do these steps:

request image data via fetch JS method call

    async function getImage(id) {
        return await fetch(`${URL}/images/${id}/data`, {
            method: 'GET',
            headers: new Headers(HEADERS)
        }).then(response => {
             return response.text();
        });
    }

thus on frontend we have raw binary image data in this format (so far so good - it's really JPEG binary data). Attached the source JPEG

https://www.dropbox.com/s/8mh6xz881by5lu1/0gCrmsLkgik.jpg?dl=0

then we call this code to receive base64 encoded image

    let reader = new FileReader();
        reader.addEventListener('loadend', event => {
        console.log(event.srcElement.result)
    });

    reader.readAsDataURL(new Blob([data]));

as a result we have something looks like base64 encoded data

https://www.dropbox.com/s/uvx042j2dgizkr9/base64.txt?dl=0

we tried to put base64 encoded data into <img> element without any success :(

So the question is how to receive on frontend correct base64 images for browser showing? What we do wrong?

I can't test because you pasted an image instead of the raw data :/ ... But I would try using it inside src attribute of some `` tag — Washington Guedes, Nov 06 '19 at 12:35
Instead of `application/octet-stream`, the type in the data url should be `image/jpeg`. — radulfr, Nov 06 '19 at 12:41
Maybe a duplicate of https://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript ? — Alexis, Nov 06 '19 at 12:42
@WashingtonGuedes just attached raw data. Look on the question again — Andriy Kryvtsun, Nov 06 '19 at 13:02
@Alexis its very close to our question, thanks! However, we already tried all advised methods and they didn't work. — Andriy Kryvtsun, Nov 06 '19 at 13:07
At `return response.text();`, try using `return response.blob();` and directly feeding the response into the `readAsDataURL`, cutting out the confusing conversion step in the middle where things might have gone wrong. — somethinghere, Nov 06 '19 at 13:07

georg · Accepted Answer · 2019-11-06T13:54:00.607

Here's some working code, based on this example and the @somethinghere's comment above. Pay attention to how the response is handled in getImage:

function getImage(id) {
    return fetch(`https://placekitten.com/200/140`, {
        method: 'GET',
    }).then(response => {
        return response.blob(); // <- important
    });
}

async function loadAndDisplay() {
    let blob = await getImage();
    let imageUrl = URL.createObjectURL(blob);
    let img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img)
}

loadAndDisplay()

That said, a much simpler option would be just to insert a tag like <img src=/images/id/data> and leave all loading/displaying to the browser. In this case your backend has to provide the correct content-type though.

How to base64 encode binary image in JS for browser showing

1 Answers1

Linked