Как декодировать Base64 в Image в angular2

Question

Мне нужно кодировать изображение в формат Base64, а затем мне нужно декодировать значение Base64 в изображение и отображать изображение на странице HTML. Теперь я закодировал изображение в base64 с кодом ниже,

getFiles(event) {
      this.files = event.target.files;
      //alert(this.files);
      var reader = new FileReader();
      reader.onload = this._handleReaderLoaded.bind(this);
      reader.readAsBinaryString(this.files[0]);
      //alert(this.files[0]);
  }

  _handleReaderLoaded(readerEvt) {
      var binaryString = readerEvt.target.result;
      this.filestring = btoa(binaryString);  // Converting binary string data.
     //alert(this.filestring);
      //console.log(this.filestring);
 }

Теперь я получаю значение base64. T я не смог преобразовать значение base64 в изображение.

Answer 1

Получен вывод с кодом ниже:

<img [src]="'data:image/jpg;base64,'+filestring" style="height:500px;width:500px" />

Answer 2

Я думаю, что вы также можете просто установить src изображения в строку base 64. Не забудьте добавить data:image/jpeg;base64, перед вашей строкой 64 строки

Answer 3

BASE64 для изображения углового 2

Вы можете попытаться использовать _sanitizer.bypassSecurityTrustUrl, чтобы сказать, что угловое значение src безопасно. Взгляните на этот класс с угловой:

class DomSanitizationService {
sanitize(context: SecurityContext, value: any) : string
bypassSecurityTrustHtml(value: string) : SafeHtml
bypassSecurityTrustStyle(value: string) : SafeStyle
bypassSecurityTrustScript(value: string) : SafeScript
bypassSecurityTrustUrl(value: string) : SafeUrl
bypassSecurityTrustResourceUrl(value: string) : SafeResourceUrl
}

и приведите пример безопасного HTML:

класс экспорта AppComponent {

private _htmlProperty: string = '<input type="text" name="name">';

public get htmlProperty() : SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
}

constructor(private _sanitizer: DomSanitizationService){}

}