html - Angular 2：如何将图像放在循环内的画布上？

Question

我正在编写一个由初学者编写的项目，现在我有一周的时间来优化一些缓慢的过程。

背景： 目前，PrimeNg 的选择列表中充满了产品。每个产品都有一个 base64 字符串，该字符串被转换为每个产品显示的图像。 这是选择列表的样子。

问题： 产品太多，转换所有图像并显示某些内容需要花费大量时间。我认为对这么多内容使用 base64 字符串已经是一个坏主意，而且我负担不起大的返工。（我在另一个线程中读到，在画布上绘图可以节省一些工作量）

那么它看起来怎么样呢？

选择产品组件.html：

<p-picklist [source]="products">
  <ng-template let-product pTemplate="item">
      <img src="{{getImage(product)}}" style="max-width: 100%">
       ...
 

选择产品组件.ts：

  getImage(product: Product) {
    if (product.image != null) {
      image.src = 'data:image/jpg;base64,' + product.image;
    }
    return 'assets/no-image-icon.png';
  }

---

我正在尝试什么 可能可以使用画布代替？我试图把它变成这样的东西：

<p-picklist [source]="products">
  <ng-template let-product pTemplate="item">
      <canvas class="col-md-2" #myCanvas id='displayImage'></canvas> //Can i pass the product here?
       ...

选择产品组件.ts：

  @ViewChild('myCanvas')
  myCanvas: ElementRef<HTMLCanvasElement>;
  public context: CanvasRenderingContext2D;

  ngAfterViewInit(): void {
    this.context = this.myCanvas.nativeElement.getContext('2d');
  }

  getImage(product: Product) { // How do i pass the product to the canvas element?
    if (product.image != null) {
      // I don't know
    }
    return 'assets/no-image-icon.png';
  }

谢谢您的帮助

标签： htmlangular