ReferenceError: options is not defined - Ionic 2 (ionic-native camera plugin)

Ionic Framework ionic-v3
1

Hi… Im trying to access my phone gallery and retrive image.but im getting this error

`app.bundle.js:2265 Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: ReferenceError: options is not defined
ORIGINAL STACKTRACE:
ReferenceError: options is not defined
    at AdminPage.getImage (http://localhost:8100/build/js/app.bundle.js:63653:43)
    at AbstractChangeDetector.ChangeDetector_AdminPage_0.handleEventInternal (viewFactory_AdminPage:482:33)
    at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:14022:30)
    at AppView.triggerEventHandlers (http://localhost:8100/build/js/app.bundle.js:18329:37)
    at eval (viewFactory_AdminPage:885:106)
    at http://localhost:8100/build/js/app.bundle.js:33471:37
    at http://localhost:8100/build/js/app.bundle.js:32848:87
    at Zone.run (http://localhost:8100/build/js/app.bundle.js:2258:25)
    at Zone.run (http://localhost:8100/build/js/app.bundle.js:17573:43)
    at NgZone.run (http://localhost:8100/build/js/app.bundle.js:17521:41)
ERROR CONTEXT:
[object Object]`

This is my code -

`import {Page, NavController, Alert} from 'ionic-angular';
import {Camera} from 'ionic-native';

@Page({
  templateUrl: './build/pages/admin_page/admin_page.html'
})

export class AdminPage{
  pages: String = "pages";
  tags: String = "tags";



  page_slect_alert: {title: string};

  constructor(){
    //this.zone = ngzone;
  //  this.image = null;
    this.page_slect_alert={
      title: 'Select Fb Page For Image'

    };
  }

  stpSelect(){
    console.log('select');
  }

  getImage(){
    Camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = "data:image/jpeg;base64," + imageData;
    }, (err) => {
    });

  };

}
`

Can any one help me.

2

You’re using an undefined variable options in your code. You have to define it first (see the code below). Here is a list of the available options.

    // Define the variable before using it in the code.
    var options = {};

    Camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = "data:image/jpeg;base64," + imageData;
    }, (err) => {
    });
1 Like
3

problem solve. Thank you.

4

Now i can work with my camera.but when i change my sourceType get image from gallery it gives this error

app.bundle.js:2265 Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'FILE_URI' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'FILE_URI' of undefined
    at AdminPage.getImage (http://localhost:8100/build/js/app.bundle.js:63655:68)
    at AbstractChangeDetector.ChangeDetector_AdminPage_0.handleEventInternal (viewFactory_AdminPage:482:33)
    at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:14022:30)
    at AppView.triggerEventHandlers (http://localhost:8100/build/js/app.bundle.js:18329:37)
    at eval (viewFactory_AdminPage:885:106)
    at http://localhost:8100/build/js/app.bundle.js:33471:37
    at http://localhost:8100/build/js/app.bundle.js:32848:87
    at Zone.run (http://localhost:8100/build/js/app.bundle.js:2258:25)
    at Zone.run (http://localhost:8100/build/js/app.bundle.js:17573:43)
    at NgZone.run (http://localhost:8100/build/js/app.bundle.js:17521:41)
ERROR CONTEXT:
[object Object]

This is the code

getImage(){
    var options = {
      quality: 50,
			destinationType: Camera.DestinationType.FILE_URI,
			sourceType: Camera.PictureSourceType.PHOTOLIBRARY
    };
    Camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = "data:image/jpeg;base64," + imageData;
    }, (err) => {
    });

  };
5

I guess that you also have to install the type definition files:

typings install cordova --save --ambient
6

This command start with typings or install cordova --save --ambient

i install using install cordova --save --ambient but same error given.in here im using Typescript

7

Forgot to mention that you need to have the typings package installed:

npm install typings -g

Then execute the following inside your project’s folder:

typings install cordova --save --ambient

For more details also check this example of using Camera in an Ionic2 application.

1 Like
8

You need to use:

navigator.camera.DestinationType.FILE_URI,
navigator.camera.PictureSourceType.PHOTOLIBRARY

in the options.

1 Like
9

Hi Josh, I didn’t get it to work using the one you suggested. Here is my code:

import {Page, Platform} from ‘ionic-angular’;
import {Camera} from ‘ionic-native’;
declare var navigator: any; // just to avoid error Property does not exist on type ‘Camera’ error

@Page({
templateUrl: ‘build/pages/page2/page2.html’,
})
export class Page2 {
imgSrc: String = ‘someImagePlaceholder.jpg’;

constructor() {}
getPhoto() {
let options = {
quality: 100,
destinationType: navigator.camera.DestinationType.DATA_URL,
sourceType: navigator.camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: navigator.camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
saveToPhotoAlbum: false,
correctOrientation:true
};

  Camera.getPicture(options).then((imageData) => {
  	this.imgSrc = "data:image/jpeg;base64," + imageData;
  }, (err) => { alert('Failed because: ' + err);
  });

}
}

UPDATE: I managed to get the Camera plugin working by just using the navigator.camera.getPicture() instead. But after I took a picture with my iPhone 4 the view didn’t update and an error in xcode is displayed:

“Snapshotting a view that has not been rendered results in an empty snapshot. Ensure your view has been rendered at least once before snapshotting or snapshot after screen updates.”

image

Here is the updated code:

getPhoto() {
		console.log('dolpos');
		let options = {
			quality: 100,
			destinationType: navigator.camera.DestinationType.FILE_URI,
			sourceType: navigator.camera.PictureSourceType.CAMERA,
			allowEdit: true,
			encodingType: navigator.camera.EncodingType.JPEG,
			targetWidth: 100,
			targetHeight: 100,
			saveToPhotoAlbum: false,
			correctOrientation:true
		};

		navigator.camera.getPicture(
			function(imageData) {
				this.imgSrc = imageData;
			}, function(err) {
				alert('Failed because: ' + err);
			}, options);
	}

Here is the view for reference:

<ion-navbar *navbar>
  <ion-title>
    Tab 2
  </ion-title>
</ion-navbar>

<ion-content class="page2">
	<img src="{{imgSrc}}" id="imgPlacement">
	<button block (click)="getPhoto()">Get Photo</button>
	<p>{{imgSrc}}</p>
</ion-content>
10

In node_modules -> ionic-native -> dist -> plugins -> camera.d.ts it shows that the properties destinationType, sourceType and encodingType are expecting numbers.

For your setting you will need to use destinationType:1 and sourceType:0 as per the comments in that file.

Using this approach you thus do not need to use navigator.camera (hence no need to declare it to circumvent any errors).

11

Did that but didn’t work for me. I am using TypeScript though…

//TODO:
  openImg() {

    let options = Camera.PictureSourceType[Camera.PictureSourceType.PHOTOLIBRARY];
    Camera.getPicture(options).then((imageData) => {

      let base64Image = "data:image/jpeg;base64," + imageData;
      alert(base64Image);
    }, (err) => {
      alert(err);
    });
  }