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值无法将base64值转换为图像。

Answer 1

BASE64 to image angular 2

您可以尝试使用_sanitizer.bypassSecurityTrustUrl来告诉angular src值是否安全。从角度看这个类：

PROCESS_LOCAL (data is in the same JVM as the running code)
NODE_LOCAL (data is on the same node)
NO_PREF (data is accessed equally quickly from anywhere and has no locality preference)
RACK_LOCAL (data is on the same rack of servers)
ANY (data is elsewhere on the network and not in the same rack)

并且是安全html的一个例子：

导出类AppComponent {

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
}

}

Answer 2

使用以下代码获得输出：

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

Answer 3

我认为您还应该能够将图像的src设置为基本64字符串。不要忘记在基础64字符串前添加data:image/jpeg;base64,

如何在angular2中解码Base64到Image

3 个答案: