Vous êtes sur la page 1sur 8

Api cámara

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a
nuestra terminal y ejecutamos:
ionic start demo102 blank --cordova

Ionic crea una carpeta con el nombre del proyecto, nuestro siguiente paso
será ubicarnos dentro a la carpeta del proyecto desde nuestra terminal con:
cd demo102

El proyecto inicia con el template blank y por esto tendremos una estructura
básica del proyecto, la carpeta en la que vamos a trabajar será src:

Agregamos la plataforma para la que vamos a desarrollar:


ionic cordova platform add android
ionic cordova platform add ios

Paso 2: Instalando el plugin.

Lo siguiente que haremos es agregar el plugin de la cámara en nuestro


proyecto con:

Para Android:

Si en el proyecto solo vamos a trabajar con Android el plugin se agrega de


la siguiente manera:
ionic cordova plugin add cordova-plugin-camera

Para IOS:
Si queremos dar soporte para IOS, al momento de instalar el plugin
debemos describir la razón para acceder a estos recursos así:
ionic cordova plugin add cordova-plugin-camera --variable CAMERA_USAGE_DE
SCRIPTION="the app need the camera" --variable PHOTOLIBRARY_USAGE_DESCRIP
TION="the app need the photolibrary"

Ahora instalamos el provider de Ionic Native para la cámara, así:


npm install @ionic-native/camera --save

Debemos recordar añadir el provider Camera en el archivo app.module.ts, así:


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

@NgModule({
declarations: [
MyApp
],
imports: [
...
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
...
Camera,
...
]
})
export class AppModule {}

Paso 3: Implementando la cámara

Para hacer uso de la cámara debemos inyectar al constructor de HomePage el


provider de la Camera, y la declararemos la variable image de tipo string que
guardara la imagen, así:
...
import { Camera, CameraOptions } from '@ionic-native/camera';

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

image: string = null;

constructor(
private camera: Camera
) {}

...
}

Ahora vamos a crear la función getPicture para implementar el uso de


cámara, con el uso de this.camera.getPicture lanzamos la cámara del
dispositivo, si todo salió bien y toma la fotografía, ejecutará la promesa y que
retorna la fotografía tomada y luego se la asignamos a nuestra variable image,
la imagen nos la retorna en Base64 por esto debemos
indicar data:image/jpeg;base64, y concatenarlo con la imageData y si algo sale
mal se mostrará un error en consola haciendo uso de catch.
getPicture(){
let options: CameraOptions = {
destinationType: this.camera.DestinationType.DATA_URL,
targetWidth: 1000,
targetHeight: 1000,
quality: 100
}
this.camera.getPicture( options )
.then(imageData => {
this.image = `data:image/jpeg;base64,${imageData}`;
})
.catch(error =>{
console.error( error );
});
}

Hay muchas más opciones que podrás encontrar en la documentación de


cordova aquí.

La clase completa quedará, así:


import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

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

image: string = null;

constructor(
private camera: Camera
) {}

getPicture(){
let options: CameraOptions = {
destinationType: this.camera.DestinationType.DATA_URL,
targetWidth: 1000,
targetHeight: 1000,
quality: 100
}
this.camera.getPicture( options )
.then(imageData => {
this.image = `data:image/jpeg;base64,${imageData}`;
})
.catch(error =>{
console.error( error );
});
}
}

Ahora nuestro template home.html, tendremos el botón que ejecutará la


función getPicture del controlador y mostraremos la imagen con <img/>,
usamos la directiva ngIf para que muestre la imagen solo la imagen es
diferente a null.
<ion-header>
<ion-navbar color="primary">
<ion-title>
Demo 102
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<button ion-button block (click)="getPicture()">Toma una foto</button>
<img [src]="image" *ngIf="image" />
</ion-content>

Paso 4: Compilando

Ahora para compilar el código solo tendremos que ejecutar en nuestra


terminal (Si tienen el entorno configurada):
ionic cordova run android --prod
ionic cordova run ios --prod

Resultado: