// 将Base64转换为Blob URL
convertBase64ToBlobUrl(base64: string): string {
  const byteString = atob(base64.split(',')[1]);
  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  
  const blob = new Blob([ab], {type: mimeString});
  return URL.createObjectURL(blob);
}

// 使用
<img [src]="convertBase64ToBlobUrl(imageData)" />

<div style="height: 500px; overflow: auto">
  <div *ngFor="let image of images; let i = index" 
       [style.height.px]="itemHeight"
       *ngIf="shouldRender(i)">
    <img [src]="image" />
  </div>
</div>

// 组件中
itemHeight = 100; // 每个图像项的高度
bufferSize = 5; // 缓冲区大小

shouldRender(index: number): boolean {
  const start = Math.max(0, this.currentScrollPosition - this.bufferSize);
  const end = this.currentScrollPosition + this.bufferSize;
  return index >= start && index <= end;
}

// worker.ts
addEventListener('message', ({data}) => {
  const blob = base64ToBlob(data.base64);
  const url = URL.createObjectURL(blob);
  postMessage({id: data.id, url});
});

function base64ToBlob(base64) {
  // 转换逻辑...
}

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-image-grid',
  templateUrl: './image-grid.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ImageGridComponent {
  // 使用OnPush策略减少变更检测次数
}

<img [src]="image.placeholder" (load)="loadImage(image)" [attr.data-src]="image.base64" />

loadImage(image: any) {
  if (!image.loaded) {
    image.src = image.base64;
    image.loaded = true;
    this.cdr.detectChanges();
  }
}