ArrayBuffer 作为源（图像标签）/显示来自 Blob 的图像答案

【问题标题】：ArrayBuffer as source (image tag) / Display image from BlobArrayBuffer 作为源（图像标签）/显示来自 Blob 的图像
【发布时间】：2018-12-11 12:11:45
【问题描述】：

我正在尝试将数组缓冲区设置为图像标签的来源。看来我有2个问题。我的控制台正在记录：

GET unsafe:data:image/jpg;base64, [object ArrayBuffer] 网络::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() {
    }

}

【问题讨论】：

正在尝试显示来自文件上传控件的图像？

标签： angular typescript

【解决方案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 to base64 encoded string

移除不安全的前缀：

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?

现在我的 Html 如下所示：

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

【讨论】：

您好，这个解决方案对我有用。但是我想在另一个选项卡中打开图像或文件，如何使用此解决方案实现相同的效果？谢谢。
@AkshayDusane 您可以使用 href 包装图像标签。它会将您的图像作为内容传递给链接。看到这个问题stackoverflow.com/questions/3139811/…
优秀的帖子。工作得很好！非常感谢。