Рендеринг потока байтов изображения в угловом клиентском приложении - PullRequest
Новая
       29

Рендеринг потока байтов изображения в угловом клиентском приложении

0 голосов
/ 03 июля 2019

У меня есть API-интерфейс NodeJS / Express RESTful, который передает запросы от сервера LDAP Active Directory. Я делаю это, потому что запросы LDAP имеют тенденцию быть медленными. Я использую RESTful API для периодического кэширования и обновления данных. Я недавно попытался добавить миниатюру фото. В исследовании выяснилось, что библиотека, которую я использую ldapjs, конвертирует собственный байтовый массив ldap в строку.

Пример того, как это выглядит:

\ ufffd \ ufffd \ ufffd \ ufffd \ u0000 \ u0010JFIF \ u0000 \ u0001 \ u0000 \ u0001 \ u0000x \ u0000x \ u0000 \ u0000 \ ufffd \ ufffd \ u0000 \ u001fLEAD Технологии Inc. V1.01 \ u0000 \ ufffd \ ufffd \ u0000 \ ufffd \ u0000 \ u0005 \ u0005 \ u0005 \ Ь \

Из-за этого изображение неправильно отображается в угловом клиентском приложении. Итак, основываясь на моих исследованиях, вот несколько попыток исправить эту проблему:

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

Я ожидал визуализированного изображения на угловой странице, но все, что я получаю, это не визуализированный заполнитель.

Вот версии библиотек, которые я использую

  • Угловой - 8.0.3
  • NodeJS - 10.15.0
  • ldapjs - 1.0.2

Я уверен, что что-то упустил, я просто не уверен, что это такое. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 03 июля 2019

Итак, после некоторого руководства, предоставленного @Aritra Chakraborty, я проверил исходный код API RESTful.Кажется, это проблема с библиотекой 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;
}

Я надеюсь, что кто-то найдет из этого какую-то ценность.

...