Converting an Image url to base64 in Angular

Question

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?

Rosmunda

Possible duplicate of How to convert image into base64 string using javascript – Artema

Also if you are using @angular/cli, you do not need to do a relative path like ../../../../../assets. You can simply do assets/logoEmpresas/${empresa.logoUrl}. – Artema

thanks for your tips, taking a look to that post – Rosmunda

Answer 1

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

Mnemosyne

Works perfectly in my Angular project :) – Council

Answer 2

works like charm in pdfMake and angular

You can use this function to create generate a base64 image

    toDataURL = async (url) => {
    console.log("Downloading image...");
    var res = await fetch(url);
    var blob = await res.blob();

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

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

    return result
  };

and then call it like this

imageSrcString = await this.toDataURL(imageSrc)

Cassiopeia

Answer 3

If we're doing this in Angular, we may as well make use of HttpClient and a Service.

Let's go ahead and add the HttpClientModule into our related Module, we'll need this in order to use HttpClient.

@NgModule({
  imports: [HttpClientModule],
  ...
})
export class AppModule {}

Then let's create a generic Image Service, and then ask Angular to inject the HttpClient into our Service.

@Injectable()
export class ImageService {
  constructor(private http: HttpClient) { }
}

Once that's done we can actually create our function in our service

imageUrlToBase64(urL: string) {
  return this.http.get(urL, {
      observe: 'body',
      responseType: 'arraybuffer',
    })
    .pipe(
      take(1),
      map((arrayBuffer) =>
        btoa(
          Array.from(new Uint8Array(arrayBuffer))
          .map((b) => String.fromCharCode(b))
          .join('')
        )
      ),
    )
}

When we use http.get and provide arraybuffer as our response type, Angular interprets the body of our request as an ArrayBuffer. What that means is that we'll now have our image as an array of bytes. All we need to do is then convert our ArrayBuffer to a base64 string. If you'd like to view alternative options, this SO Question has good answers.

// taken from above
map(
  btoa(
    Array.from(new Uint8Array(arrayBuffer))
    .map((b) => String.fromCharCode(b))
    .join('')
  )
)

Now that the function is done, we can shift to usage:

@Component()
export class AppComponent {
  base64Image: string;
  constructor(private imageService: ImageService) {
      this.imageService.imageUrlToBase64('https://picsum.photos/200/300').subscribe(
          base64 => {
              this.base64Image = base64
      })
  }
}

We'll now have access to the image as a base64

Mcmath

Hi, thanks for your answer... but it gives me an error, when i try with your URL it works but if try with any other URL it fails ( HttpErrorResponse in console ), what is happening? the url that im trying is... img-01.stickers.cloud/packs/… Or... clientes.infowork.es/74042-thickbox_leomega/… Any help is apreciated! – Rosmunda

Are you prefixing your URL with https://? – Mcmath

yep, i'm typing the url exactly how i copied here, very weird error... i finally decided to download and convert it in my node server... i think i can deal better with errors , but would be interesting to solve this error :S – Rosmunda

You're probably running into a CORS error - that would be a whole other issue to solve! – Mcmath