Convert url of image into base 64

Question

I am recieveing image URL from API, while displaying the image breaks sometime. For this reason i am planing to get the url from the API and Convert the image into the Base64 format and then display the image.

As of for now i m displaying image from url obtained from the API. Could anyone assist me on how i can download the image from the url. And then convert it to base 64 format.

API.URL is the url of the image obtained form API.

Tried with many alternatives but without success, now i have decided to convert the url into base 64 before assigning.

if you trying to show profile image put url on src tag it will be work — Abhishek, Dec 13 '18 at 10:19
this would be helpful - https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript — Tushar Walzade, Dec 13 '18 at 10:19
You can encode and decode with this answer https://stackoverflow.com/a/41972362/3681565 — Gaspar, Dec 13 '18 at 10:22

MennyMez · Answer 1 · 2018-12-13T10:25:50.053

All you need to convert a variable to base 64 is use the btoa() javascript native function.

But this will not convert the image but the URL itself.

In order to convert the image itself, you must first load it into a HTML5 canvas element and then use toDataURL() and it will return a base64 representation of the image. see here for more "How to convert image into base64 string using javascript "

const url = "http://google.com"
const base64url = btoa(url)
console.log(base64url)

Convert url of image into base 64

1 Answers1