typescript - Angular：为什么 HTML2Canvas 截屏需要这么长时间？

我需要在用户点击弹出窗口上的保存后拍摄当前 HTML 状态的图像，然后将其存储到数据库中。为此，我使用了 HTML2Canvas，并在对话框的关闭事件（primeng 动态对话框组件）中调用该函数。问题是执行 HTML2Canvas 需要太长时间，而且在执行过程中会阻塞屏幕。我应该使用其他库吗？或者有没有什么方法可以加快这个过程，同时在后台运行该过程时关闭对话框？

注意：我正在使用 Angular 14.2.10

以下是我正在尝试使用的代码

@ViewChild("screen", { static: true }) screenRef: ElementRef<any>;

dialogRef.onClose.subscribe(data => {
  if (data) {
     this.capture()
  }
});

capture(){
const dimensions = this.screenRef.nativeElement.getBoundingClientRect();
let current = this
**html2canvas(this.screenRef.nativeElement, {
width: dimensions.width,
height: dimensions.height,
useCORS: true,
})**.then(canvas => {
this.layoutImage = canvas.toDataURL("image/jpeg");
});
}

注意：执行加粗/高亮部分需要太长时间 我也尝试在一个非常简单的 div 上执行它，但仍然遇到相同的问题

答案＃1

你可以尝试一些调整来减小图像大小并加快处理速度

1. 使用缩放值，例如 - html2canvas.default（document.body， { scale： 0.1，
2. 传递质量参数 - canvas.toDataURL("image/png", 1.0),
3. 在对话框关闭事件中，使用 Angular Web Worker 在后台线程中运行所有繁重的操作。

干杯！