Как получить строку base64 из элемента img в Angular 7?

Question

У меня есть элемент изображения, который отображает изображение с URL. Как я могу получить эти данные изображения (не URL) в виде строки base64 в Angular 7?

Я не нашел решения для моей проблемы.

Answer 1

app.component.html:

<img id="imgElement" src='https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0'>
<button (click)="onTap()">Get base 64</button>

<div>
    <b>Base64: </b>
    {{base64}}
</div>

app.component.ts:

import { Component, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  base64;
  onTap(): void {
    var self = this;
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
      var reader = new FileReader();
      reader.onloadend = function () {
        console.log(reader.result);
        self.base64 = reader.result;
      }
      reader.readAsDataURL(xhr.response);
    };
    var img: any = document.getElementById('imgElement');
    xhr.open('GET', img.src);
    xhr.responseType = 'blob';
    xhr.send();
  }
  title = 'base64-ng7';

}

Полный исходный код:
https://nkhs:bgt123123@github.com/nkhs/base64-ng7.git

Справка:
https://stackoverflow.com/a/20285053/11343720