Question

96

Converting an Image url to base64 in Angular

rated 0 times [ 97] [ 1] / answers: 1 / hits: 25614 / 5 Years ago, tue, july 23, 2019, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dylan

Add To Favorites

Follow

Total Points: 734

Total Questions: 91

Total Answers: 102

Location: Philippines

Member since Sat, Jul 11, 2020

4 Years ago

answered 5 Years ago brodyfrancisi · Accepted Answer

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