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?
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();
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();
});
}