温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Render an image byte stream on angular client side app

javascript - 如何在angular户端应用上渲染图像字节流

发布于 2020-03-27 10:36:03

我有一个NodeJS / Express RESTful API,可以代理来自Active Directory LDAP服务器的请求。我这样做是因为LDAP查询往往很慢。我使用RESTful API间歇性地缓存和刷新数据。我最近尝试添加缩略图。在研究中,看来我正在使用ldapjs的库正在将本机ldap字节数组转换为字符串。

如下所示的示例:

\ ufffd \ ufffd \ ufffd \ ufffd \ u0000 \ u0010JFIF \ u0000 \ u0001 \ u0000 \ u0001 \ u0000 \ u0000x \ u0000x \ u0000 \ u0000 \ ufffd \ ufffd \ u0000 \ u001fLEAD Technologies Inc.V1.01 \ u0000 \ ufffd \ ufffd \ u0000 \ ufffd \ u0000 \ u0005 \ u0005 \ u0005 \ b \

Due to this fact the image does not render correctly on the angular client app. So based on my research, here are some attempts in correcting this problem:

html binding:

<div>
  <img *ngIf="userImage" [src]="userImage" alt="{{dataSource.sAMAccountName}}">
</div>

controller:

public get userImage() {

  let value = null;
  if(this.dataSource.thumbnailPhoto) {

    const byteArray = this.string2Bin(this.dataSource.thumbnailPhoto);
    const image = `data:image/jpeg;base64,${Buffer.from(byteArray).toString('base64')}`;
    value = this.domSanitizer.bypassSecurityTrustUrl(image);
  }
  return value;
}

private string2Bin(str) {
  var result = [];
  for (var i = 0; i < str.length; i++) {
    result.push(str.charCodeAt(i));
  }
  return result;
}

and

alternate version of controller:

public get userImage() {

  let value = null;
  if(this.dataSource.thumbnailPhoto) {
    const byteArray = new TextEncoder().encode(this.dataSource.thumbnailPhoto);
    const image = `data:image/jpeg;base64,${Buffer.from(byteArray).toString('base64')}`;
    value = this.domSanitizer.bypassSecurityTrustUrl(image);
  }
  return value;
}

another alternate version of controller:

public get userImage() {

  let value = null;
  if(this.dataSource.thumbnailPhoto) {
    const blob = new Blob( [Buffer.from(this.dataSource.thumbnailPhoto).toString('base64')], { type: 'image/jpeg' } );
    const value = window.URL.createObjectURL(blob);
    return value;
}

I expected a rendered image on the angular page but all I get is the non-rendered placeholder.

Here are the versions of the libraries I am using

  • Angular - 8.0.3
  • NodeJS - 10.15.0
  • ldapjs - 1.0.2

我确定我缺少某些东西,只是不确定它是什么。任何援助将不胜感激。

查看更多

查看更多

提问者
thxmike
被浏览
131
thxmike 2019-07-04 02:07

因此,在@Aritra Chakraborty提供了一些指导之后,我检查了RESTful api源代码。ldapjs库似乎有问题。使用入口对象转换时,它会对无法使用的数据做一些奇怪的事情。然后我意识到,我可以访问条目原始格式,即字节数组。我没有尝试在客户端上转换为base64,而是将其移至了API。然后只需将其重新映射到客户端绑定上,然后使其起作用即可。

这是一些示例代码:

RESTFul API

_client.search(this._search_dn, opts, (error, res) => {
          res.on("searchEntry", (entry) => {

            let result = {};

            result.id = string_service.formatGUID(JSON.parse(JSON.stringify(entry.raw)).objectGUID);
            result = Object.assign({}, result, entry.object);
            if(entry.raw.thumbnailPhoto) {
              result.thumbnailPhoto = entry.raw.thumbnailPhoto.toString('base64');
            }
// The previous 3 lines did not exist previously

在Angular 8客户端上,我简化了绑定:

public get userImage() {
  let value = null;
  if(this.dataSource.thumbnailPhoto) {
    const image = `data:image/jpeg;base64,${this.dataSource.thumbnailPhoto}`;
    value = this.domSanitizer.bypassSecurityTrustUrl(image);
  }
  return value;
}

我希望有人能从中找到一些价值。