html2canvas in angular 4

Question

I am able to take a screenshot using html2canvas in angular 4 but i need to send the string image to the server side using a http post call

Answer 1

When providing the callback for a promise in Angular, you should use an arrow function, rather than an anonymous function. Arrow functions bind to the current context correctly, so the function you are trying to call will be accessible.

Try this instead:

pdfDownload() {
    html2canvas(document.body).then(canvas => {
        var imgData = canvas.toDataURL("image/png");
        this.AddImagesResource(imgData);
        document.body.appendChild(canvas);
    });
}

Answer 2

pdfDownload() {
    let self = this;//use this variable to access your class members inside then().
    html2canvas(document.body).then(canvas => {
        var imgData = canvas.toDataURL("image/png");
        self.AddImagesResource(imgData);
        document.body.appendChild(canvas);
   });
}

Answer 3

Make sure to import the script under the scripts list in angular-cli.json

"scripts": [
"../node_modules/html2canvas/dist/html2canvas.min.js"
]

And in the class as:

import * as html2canvas from "html2canvas"