在 angular 客户端应用程序上渲染图像字节流

Render an image byte stream on angular client side app

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

示例:

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

由于这个原因,图像无法在 angular 客户端应用程序上正确呈现。所以根据我的研究,这里有一些纠正这个问题的尝试:

html绑定:

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

控制器:

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;
}

控制器的替代版本:

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;
}

控制器的另一个替代版本:

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;
}

我希望 angular 页面上有渲染图像,但我得到的只是未渲染的占位符。

这是我使用的库的版本

我确定我遗漏了什么,只是不确定是什么。如有任何帮助,我们将不胜感激。

所以在@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;
}

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