Отображение GIF в кодировке base64 в приложении nativescript angular

Question

Есть ли способ отобразить gif с кодировкой base64 / array в приложении nativescript angular? Я использовал nativescript-gif, но он не работает.

Answer 1

Вы можете использовать собственные API для записи строки base64 в файл, а затем передать путь к файлу в плагин GIF.

    const base64Data = "Your_Base64_String";

    const file = File.fromPath("ValidFilePath...");
    let nativeData;

    if (isIOS) {
        nativeData = NSData.alloc().initWithBase64EncodedStringOptions(base64Data, 0);
    }

    if (isAndroid) {
        nativeData = android.util.Base64.decode(base64Data, android.util.Base64.NO_WRAP);
    }

    file.writeSync(nativeData);

Я тестировал код на Playground , FYI, так как Playground не поддерживает плагин GIF, поэтому я использовал компонент Image для тестирования. Также убедитесь, что я передаю правильную строку, я загружаю случайный GIF из inte rnet и конвертирую его в строку base64.

Answer 2

Вы можете попытаться преобразовать буфер массива в base64 вручную перед отображением GIF. Попробуйте следующее

Сервис изображений

import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class ImageService() {
  private arrayBufferToBase64(buffer: any) {
    let binary = '';
    const bytes = new Uint8Array(buffer);
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
  }

  public getImage(id: number): observable<any> {
    return this.http.get(BASE_URL + '/' + id).pipe(map(buffer => this.arrayBufferToBase64(buffer)));
  }
}

Контроллер

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent implements OnInit, OnDestroy {
  imageSource: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.imageService.getImage(1).subscribe(
      base64 => {
        this.imageSource = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/gif;base64, ${base64}`);
      },
      error => {
        // handle error
      }
    );
  }
}

Шаблон

<img [src]="imageSource" alt="Image Source">

Функция arrayBufferToBase64() получена из здесь .