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}}">