Cámara en Ionic 3

by | Jun 7, 2019 | Ionic

1.-Para poder utilizar la cámara en Ionic es necesario instalar el pluggin de cordova con los siguientes comandos:

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera@4

2.- Después hacemos la inyección de dependencias en el constructor de la página donde vamos a utilizar el pluggin.

import {Camera, CameraOptions} from '@ionic-native/camera';

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

constructor(public navCtrl: NavController, private camera: Camera) {
}

4.- Creamos una variable donde guardaremos la imagen tomada.

picture:any;

5.- Creamos un método con el que podremos acceder a la cámara del dispositivo.

image() {   const options: CameraOptions = {     quality: 100,     destinationType: this.camera.DestinationType.DATA_URL,     encodingType: this.camera.EncodingType.JPEG,     mediaType: this.camera.MediaType.PICTURE   }   this.camera.getPicture(options).then((imageData) => {     let base64Image = 'data:image/jpeg;base64,' + imageData;     this.picture = 'data:image/jpeg;base64,' + imageData;   }, (err) => {   }); }

6.- Agregamos el provider en el archivo app.module.ts

providers: [   Camera,   {provide: ErrorHandler, useClass: IonicErrorHandler} ]

7.- Agregamos un botón en el archivo html de la misma página y llamamos al método en el evento click.

<button ion-button (click)="image()">Photo</button>

8s.- Mostraremos la imagen en una etiqueta img en el mismo archivo html

<img src="{{picture}}">

Entradas relacionadas

Descubre en 5 minutos las áreas de tu empresa puedes mejorar