Html2canvas: How can I use html2canvas with Angular 2?

Created on 17 Oct 2016 · 6Comments · Source: niklasvh/html2canvas

Can someone please explain how to use html2canvas properly with Angular 2?

It can be installed with npm install html2canvas but it does not contain any TypeScript code.
@niklasvh , will you provide a version we can easily use with Angular 2?

Source

dj-at-work

👍7

Most helpful comment

I'm using with Ionic2 + Angular 2.

import * as html2canvas from 'html2canvas';

And use like:

myClickFunction( event: any ){
  html2canvas( event.target )
    .then((canvas) => {
      console.log( canvas );
    })
    .catch(err => {
      console.log("error canvas", err);
    });
}

adrianowead on 24 Aug 2017

👍2

All 6 comments

Check this answer
Here

Tarek-Adra on 14 Feb 2017

👍2

Any news please? did someone fix this issue?

da45 on 8 Mar 2017

@Tarek-Adra Sorry that link didn't work for me.

/Applications/MAMP/htdocs/html5-banner/src/app/selected-banner/selected-banner.component.ts (64,10): Argument of type '{ onrendered: (canvas: any) => void; }' is not assignable to parameter of type 'Html2CanvasOptions'.
  Object literal may only specify known properties, and 'onrendered' does not exist in type 'Html2CanvasOptions'.

jexobejas on 22 Jun 2017

I'm using with Ionic2 + Angular 2.

import * as html2canvas from 'html2canvas';

And use like:

myClickFunction( event: any ){
  html2canvas( event.target )
    .then((canvas) => {
      console.log( canvas );
    })
    .catch(err => {
      console.log("error canvas", err);
    });
}

adrianowead on 24 Aug 2017

👍2

I am trying this in Angular 4 and I get below error:
Uncaught (in promise): Error: Can't resolve all parameters for ImageService: (?).
I have installed the typings from "@types/html2canvas"