6

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.

Max
  • 1,070
  • 3
  • 13
  • 19
praveen
  • 71
  • 1
  • 4
  • Welcome to Stack Overflow! Please review our [SO Question Checklist](http://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) to help you to ask a good question, and thus get a good answer. – Joe C Jan 16 '17 at 21:40

3 Answers3

14

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) {
Max
  • 1,070
  • 3
  • 13
  • 19
3

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);
sapan
  • 150
  • 7
0
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

Taimoor Tariq
  • 405
  • 5
  • 5