Converting an Image url to base64 in Angular

Issue

I am struggling trying to convert a given image url to base64… in my case i have a String with the image’s path

var imgUrl = `../../../../../assets/logoEmpresas/${empresa.logoUrl}`

how can i convert the given image url in a base64 directly?… i tried this post.

Converting an image to base64 in angular 2

but this post is getting the image from a form… how can i adapt it?

Solution

You can use this to get base64 image

async function getBase64ImageFromUrl(imageUrl) {
  var res = await fetch(imageUrl);
  var blob = await res.blob();

  return new Promise((resolve, reject) => {
    var reader  = new FileReader();
    reader.addEventListener("load", function () {
        resolve(reader.result);
    }, false);

    reader.onerror = () => {
      return reject(this);
    };
    reader.readAsDataURL(blob);
  })
}

Then call it like this

getBase64ImageFromUrl('your url')
    .then(result => testImage.src = result)
    .catch(err => console.error(err));

Answered By – Tony Ngo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0