ArrayBuffer as source (image tag) / Display image from Blob

Question

I'm trying to set an arraybuffer as source of an image tag. It seems that I've got 2 problems. My console is logging:

GET unsafe:data:image/jpg;base64, [object ArrayBuffer] net::ERR_UNKNOWN_URL_SCHEME

so my question is:
1. How do I convert my 'blob' to a string?
(if necessary: 2. How to remove the unsafe flag?)

html:

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

ts (blob is transferred):

export class ImgViewerComponent implements OnInit {

    @Input('blob') blob: ArrayBuffer;

    constructor() { }

    ngOnInit() {
    }

}

Answer 1

Okay found some good solutions:

1. Converting ArrayBuffer to string:
   

   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 to base64 encoded string

2. Remove the unsafe prefix:
   

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

   How to avoid adding prefix “unsafe” to link by Angular2?

Now my Html looks like the following:

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