如何才能像 Upwork Tracker 一样添加对当前屏幕进行屏幕截图的功能？

Question

在 Angular 11 中，我尝试每 10 分钟自动捕获一次全窗口屏幕截图。为了实现这一目标，我最初实现了由按钮单击事件触发的屏幕截图捕获逻辑。但是，我的目标是使屏幕截图捕获时间-基于而不是事件驱动。

我集成了 html2canvas 包来促进屏幕截图捕获过程。问题在于调整代码以按预定义的时间间隔自动捕获屏幕截图。

所需的功能包括安排任务每 10 分钟截取一次屏幕截图，无需用户交互。

探索计时器或调度程序等方法来实现这种基于时间的捕获至关重要。挑战可能围绕着处理 Angular 中的异步代码执行。正确配置和管理计时方面对于此功能至关重要。

我正在寻求有关如何使用 html2canvas 在 Angular 11 中实现这种基于时间的自动化屏幕截图的指导或建议

import { Component } from '@angular/core';
import html2canvas from 'html2canvas';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'html2canvas capture in Angular';

  capturedImage;
  constructor() {}

  clickme() {
    let element = document.querySelector('#capture');
    html2canvas(element as HTMLElement, {
      imageTimeout: 1,
      allowTaint: true,
      useCORS: true,
    }).then((canvas) => {
      this.capturedImage = canvas.toDataURL();
      const imageData = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.setAttribute('href', imageData);
      link.click();
    });
  }
}

Answer 1

根组件中的

ngx-capture

和

setTimer

就可以了。

https://github.com/Wanchai/ngx-capture