1

Im trying to use this plugin in my Ionic3 app:

https://github.com/VirtuoWorks/CanvasCameraPlugin

I have managed to install the plugin with: 

cordova plugin add https://github.com/VirtuoWorks/CanvasCameraPlugin.git && cordova prepare

My problem is what to do next, i need to include the plugin into the app, with ionic native plugins this can be done like this:

import { SplashScreen } from '@ionic-native/splash-screen';

But what should i use for the CanvasCamera plugin?

import { CanvasCamera } from '??????';

My current code:

declare let CanvasCamera: any;
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public platform: Platform) {
    this.canvasCameraStart();
  }

  canvasCameraStart() {
    this.platform.ready().then(() => {
      var options = {
        quality: 75,
        destinationType: CanvasCamera.DestinationType.DATA_URL,
        encodingType: CanvasCamera.EncodingType.JPEG,
        width: 640,
        height: 480
    };
      CanvasCamera.start(options);// here call the plugin's method
    });
 }

}
Sultanen
  • 3,084
  • 5
  • 25
  • 46

2 Answers2

1

You need to declare plugin's object as shown below.

declare let CanvasCamera: any;

@Component({
  ...
})
export class TestPage {

  ...

  myPluginMethod() {
     this.platform.ready().then(() => {
       CanvasCamera.start(options);// here call the plugin's method
     });
  }
}

Update: You need to do as shown below.

constructor(public navCtrl: NavController, public platform: Platform) {

 this.platform.ready().then(() => {
    this.canvasCameraStart();
   });

 }

  canvasCameraStart() {
     let options = {
        quality: 75,
        destinationType: CanvasCamera.DestinationType.DATA_URL,
        encodingType: CanvasCamera.EncodingType.JPEG,
        width: 640,
        height: 480
    };
      CanvasCamera.start(options);// here call the plugin's method
   }
Sampath
  • 63,341
  • 64
  • 307
  • 441
  • Thanks for the reply! Where do i add the declare line? If i add it on the line below the "imports" i get a TS error "[ts] ',' expected". – Sultanen Sep 13 '17 at 15:48
  • OK just do this and let me know: `declare let CanvasCamera: any;` – Sampath Sep 13 '17 at 15:51
  • That worked fine :) I updated to the code you supplied and now i get a runtime error "Runtime Error Uncaught (in promise): ReferenceError: CanvasCamera is not defined ReferenceError: CanvasCamera is not defined at http://localhost:8123/build/main.js:66:34 at t.invoke " – Sultanen Sep 13 '17 at 16:01
  • 1
    Can you show your latest `code`? Put that on your question area. – Sampath Sep 13 '17 at 16:09
  • Please see the **Update** – Sampath Sep 13 '17 at 16:38
0

Contributors for this module made a type definition file for this module as stated in Angular 2 support #8.

You can install the type definition file following the instructions on npm @types/cordova-plugin-canvascamera.

You should then be able to use CanvasCamera in your ts files according to Typescript 2.0. “types” field in tsconfig.json

Best Regards.

Varun Naharia
  • 5,318
  • 10
  • 50
  • 84
Sami Radi
  • 1