angular - 使用 ArrayBuffer 作為來源（image 標籤）/ 從 Blob 顯示圖片

我正在嘗試將一個 arraybuffer 設置為圖片標籤的來源。似乎我遇到了兩個問題。我的控制台正在記錄：

GET 不安全:data:image/jpg;base64, [object ArrayBuffer] net::ERR_UNKNOWN_URL_SCHEME

所以我的問題是：
1. 我如何將我的 'blob' 轉換為字串？
（如果有必要：2. 如何移除不安全標記？）

html ：

<img src="data:image/jpg;base64, {{blob}}">

ts（blob 已傳輸）：

export class ImgViewerComponent implements OnInit {

    @Input('blob') blob: ArrayBuffer;

    constructor() { }

    ngOnInit() {
    }

}

答案＃1

好吧，找到了一些不錯的解決方案：

1. 將 ArrayBuffer 轉換為字串：

   function _arrayBufferToBase64( buffer ) {
     var binary = '';
     var bytes = new Uint8Array( buffer );
     var len = bytes.byteLength;
     for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
     }
     return window.btoa( binary );
   }
   

   ArrayBuffer 轉為 base64 編碼字串

2. 移除不安全的前綴：

   import {DomSanitizer} from '@angular/platform-browser';
   ...
   constructor(private sanitizer:DomSanitizer){}
   ...
   sanitize( url:string ) {
     return this.sanitizer.bypassSecurityTrustUrl(url);
   }
   

   如何避免在 Angular2 中給鏈接加上前綴「unsafe」？

現在我的 HTML 看起來如下：

<img [src]="sanitize('data:image/jpg;base64, ' + _arrayBufferToBase64(blob))">