Angular call function to capture div and wait for the cappture before continuing-CodePudding

I have a method that captures a div. I call this method called capture() from another method.

Here's the code:

theimage; // define the variable


callcapture() {

  // do stuff

  this.capture(); // Call the method here 

  // Do other stuff below BUT (Do not run the rest of the code until "this.capture() has finished ")

}


capture() {
  const element = document.getElementById("capture") as HTMLCanvasElement;
  html2canvas(element).then((canvas) => {
    this.theimage = canvas.toDataURL();
  });
}

How can I do this?

CodePudding user response：

How about using Angular's @viewChild for that? It's rarerly a good idea to use native JS methods like getElementById, getElementsByClassName etc; in an Angular application.

    <canvas #myCanvas></canvas>

    @ViewChild('myCanvas', {static: false}) canvasElem: ElementRef;

And then you work with that :

const context = this.canvasElem.nativeElement.getContext("2d");
const base64:string = this.canvasElem.nativeElement.toDataURL();

CodePudding user response：

You can return the promise and use another then to make sure the element has been captured already:

callcapture() {
  // do stuff
  this.capture().then(() => {
    // Do other stuff below BUT (Do not run the rest of the code until "this.capture() has finished ")
  });
}

capture() {
  const element = document.getElementById("capture") as HTMLCanvasElement;
  return html2canvas(element).then((canvas) => {
    this.theimage = canvas.toDataURL();
  });
}