Manejo de fotos con Ionic

En esta entrada vamos a hablar de cómo guardar imágenes de la cámara de fotos o de la galería del usuario y como poder hacer un ajuste una vez las hemos cargado.

Lo primero que debemos hacer, como siempre, es instalar el plugin de Cordova y de Ionic (Link oficial)

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

Una vez instalado, nos aseguramos de que esté registrado en el archivo app.modules.ts

import { Camera } from '@ionic-native/camera';
@NgModule({
providers: [
Camera
]
})

¡Ya podemos empezar a usar la cámara! Para ello simplemente la inyectamos en nuestra página o provider

constructor(public navCtrl: NavController,
public navParams: NavParams,
public camera:Camera,
...

Y cuándo queramos utilizarla, en el evento click de un botón, por ejemplo,
let options:CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.CAMERA,
correctOrientation: true
}
this.camera.getPicture(options).then((imageData) => {
this.file.photos.push('data:image/jpeg;base64,' + imageData);
}

Las opciones más importantes son:

  • destinationType
  • sourceType
  • correctOrientation


destinationType
Camera.DestinationType.FILE_URI es la opción que se usa por defecto. Devuelve una ruta a la imagen que podemos usar directamente, pero en el lab no funciona (nos dará un error). Sin embargo, si probáis en el dispositivo (o con el IonicDev) sí que funcionará.

Camera.DestinationType.DATA_URL es la opción para obtener la imagen codificada en base64. Esta opción a priori tiene menos rendimiento, sin embargo yo la estoy usando para obtener la imagen y poder manipularla directamente (rotarla, escalarla, etc)

sourceType
Camera.PictureSourceType.CAMERA es la opción por defecto. Nos permite obtener una imagen de la cámara de fotos directamente.

Camera.PictureSourceType.PHOTOLIBRARY nos permite obtener una imagen de la librería de imágenes.

correctOrientation
Esta propiedad booleana, puede ser true o false. En caso de que la definamos a true, la foto obtenida tendrá la orientación del móvil es decir, si se sacó en landscape la foto será apaisada, y si se sacó en portrait, será alargada.


El resto de opciones están en la documentación, por si queréis echarles un ojo.

Y así, con este sencillo método getPicture, ya podemos trabajar con imágenes sacadas de la galería del usuario o de la cámara de fotos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *