Angular检测dom-to-image的变化，并无限次渲染它。

npm install dom-to-image

import domtoimage from 'dom-to-image';

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  @ViewChild('imageContainer') imageContainer: ElementRef;

  constructor() { }

  ngOnInit() {
    this.renderImage();
  }

  ngAfterViewInit() {
    this.detectChanges();
  }

  detectChanges() {
    const observer = new MutationObserver(() => {
      this.renderImage();
    });

    observer.observe(this.imageContainer.nativeElement, {
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true
    });
  }

  renderImage() {
    domtoimage.toPng(this.imageContainer.nativeElement)
      .then((dataUrl) => {
        // 在这里可以处理生成的图像数据
      })
      .catch((error) => {
        console.error('生成图像失败：', error);
      });
  }
}

<div #imageContainer>
  <!-- 这里是要生成图像的内容 -->
</div>