Get Base64 String from an HTTP request-CodePudding

I have this function getImageAsBlob that uses HttpClient to get the image as Blob and function toBase64 which converts the retrieved blob into a base64 string.

How do I chain the functions in order to get the base64 string given that I have only the URL of the image? Thanks for the help!

Below are the functions:

toBase64(blob: Blob): Observable<string> {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        return fromEvent(reader, 'load')
          .pipe(map(() => (reader.result as string)))
    }

getImageAsBlob(url: string): Observable<Blob>{
        return this.http.get(url,{responseType:'blob'})
    }

CodePudding user response：

getImageAsBlob("url")
  .pipe(
    mergeMap(blobResponse => toBase64(blobResponse)
  )
  .subscribe(img => ...)

CodePudding user response：

You have to subscribe to getImageAsBlob and on next callback , you could call your function in order to create your image. Something like:

    this.getImageAsBlob('url').subscribe(img => {
    this.toBase64(img);
  }, 
    err => console.log('Error', err),
    () => console.log('Completed');
);

More information about Subscribers can be found here: https://rxjs.dev/api/index/class/Subscriber @AlexCano