Angular调用div截图方法后如何等待截图完成再执行后续代码

你的需求核心是等待capture()里的异步截图操作完成后，再执行后续代码，本质是处理异步流程，可通过以下两种方式实现：

方法1：使用async/await（推荐，可读性更高） #

首先修改capture()方法，将html2canvas返回的Promise向外暴露，再在调用处用await等待异步操作执行完成：

theimage; // 定义存储截图的变量

// 调用方法添加async修饰符，标识内部有异步操作
async callcapture() {
  // 执行前置逻辑
  // do stuff

  // 等待截图操作完全完成后，再执行后续代码
  await this.capture(); 

  // 此处开始的代码会在this.theimage赋值完成后才运行
  // Do other stuff below
}

// capture方法返回html2canvas的Promise实例
capture() {
  const element = document.getElementById("capture") as HTMLCanvasElement;
  // 把异步操作的Promise返回，供调用方等待
  return html2canvas(element).then((canvas) => {
    this.theimage = canvas.toDataURL();
  });
}

如果需要捕获截图失败的异常，可以用try/catch包裹异步逻辑：

async callcapture() {
  try {
    // 前置逻辑
    // do stuff
    await this.capture();
    // 后续逻辑
  } catch (err) {
    // 自定义处理截图失败的场景
    console.error('截图生成失败', err);
  }
}

方法2：使用.then链式调用 #

如果场景不适合用async/await，可直接在返回的Promise后挂载回调，把后续逻辑放到回调中执行：

theimage; // 定义存储截图的变量

callcapture() {
  // 执行前置逻辑
  // do stuff

  this.capture().then(() => {
    // 此处的代码会在截图完成、theimage赋值后才执行
    // Do other stuff below
  }).catch(err => {
    // 处理截图失败异常
    console.error('截图生成失败', err);
  });
}

// capture方法同样需要返回Promise
capture() {
  const element = document.getElementById("capture") as HTMLCanvasElement;
  return html2canvas(element).then((canvas) => {
    this.theimage = canvas.toDataURL();
  });
}

内容的提问来源于stack exchange，提问作者deszok