CODEWITHSUNDEEP
angularhtml2canvas
praveen
praveen

Reputation: 71

html2canvas callback Onrendered doesn't work in Angular 2

In Angular 2 project, I have installed the html2canvas module with version number 0.5.0beta.

Then in my TS file, I have import it as:

import html2canvas from 'html2canvas';

Then in my pdfDownload method, that I have written,

html2canvas (document.getElementById('exportthis'), {
                        onrendered : function (canvas) {

After this, when I execute the npm start command, I got error like,

onrendered is not a property defined in html2canvasOptions.

Can anybody help me resolving this issue? This is the first time I am working on angular 2 and html2canvas.

Upvotes: 6

Views: 7731

Answers (3)

Taimoor Tariq
Taimoor Tariq

Reputation: 515

newImg;
saveImage() {
html2canvas(document.getElementById('capture')).then((canvas) => {
  this.newImg = canvas.toDataURL("image/png")
})
}

<img [src]="newImg" alt="">

FOR INSTALLATION:

npm install @types/html2canvas --save

Upvotes: 0

sapan
sapan

Reputation: 150

I faced similar problem.

I was able to solve it by declaring the option object outside html2canvas function call. Something like. This prevent the TS compiler from checking for the passed option object for internals. 

var obj = {
  onrendered: function (canvas) {
    var imgData = canvas.toDataURL("image/png");
  }
};
  html2canvas(document.getElementById("exportthis"), obj);

EDIT:
After upgrade of typescript to 2.4.0 , if you get below error 

TS2559: Type '{ onrendered: (canvas: any) => void; }' has no properties in common with type 'Html2CanvasOptions'.

then add any of Html2CanvasOptions property like logging: false

obj = {
  onrendered: function (canvas) {
    var imgData = canvas.toDataURL("image/png");
  },
  logging: false
};
  html2canvas(document.getElementById("exportthis"), obj);

Upvotes: 3

Max
Max

Reputation: 1090

Probaby you use html2canvas 0.5 version. onrendered was used in 0.4 and older versions. html2canvas 0.5 was rewriten to use Promises. You have to change

html2canvas (document.getElementById('exportthis'), { onrendered : function (canvas) {

to 

html2canvas(document.getElementById('exportthis')).then(function (canvas) {

Upvotes: 14

Related Questions