在 nativescript angular 应用程序中显示 base64 编码的 gif

Question

有没有办法将 base64/array 缓冲区编码的 gif 显示到 nativescript angular 应用程序？我使用了 nativescript-gif 但它不起作用。

Answer 1

您可以尝试在显示 gif 之前手动将数组缓冲区转换为 base64。尝试以下

图片服务

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() 来自 here。

Answer 2

您可以使用本机 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 上测试了代码，仅供参考，因为 Playground 不支持 GIF 插件，所以我使用 Image 组件进行测试。还要确保我传递的是有效字符串，我从互联网上下载了一个随机 GIF 并将其转换为 base64 字符串。

在 nativescript angular 应用程序中显示 base64 编码的 gif

Display base64 encoded gif in nativescript angular app

nativescript

angular