Cámara con Ionic 3

6 enero, 2018 - 1 minute read

Después de muchos intentos he conseguido usar la camara con ionic 3 y mostrar el resultado. Aparte de esto lo guarda en la galeria de imagenes. Como siempre solo esta probado en Android.

Iniciamos un proyecto nuevo

ionic start camara blank

1	ionic start camara blank

Accedemos a la carpeta e importamos los plugins

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

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

Implementando Ionic

Ahora lo que tenemos que hacer es agregar el plugin donde corresponda en el module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Camera } from '@ionic-native/camera';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
      Camera,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Camera,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Inicializamos el plugin y creamos las funciones necesaria para poder usar la camara.

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

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

export class HomePage
{
    image: string = null;
    constructor(public navCtrl: NavController, private camera: Camera) {}

    getPicture() {
        const options: CameraOptions = {
            quality: 100,
            destinationType: this.camera.DestinationType.DATA_URL,
            saveToPhotoAlbum: true
        }

        this.camera.getPicture(options)
            .then(imageData =&gt; {
                this.image = `data:image/jpeg;base64,${imageData}`;
            })
            .catch(error =&gt; {
                alert(error);
            });
    }
}

import {Component} from '@angular/core';

import {NavController} from 'ionic-angular';

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

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage

{

image: string = null;

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

getPicture() {

const options: CameraOptions = {

quality: 100,

destinationType: this.camera.DestinationType.DATA_URL,

saveToPhotoAlbum: true

}

this.camera.getPicture(options)

.then(imageData => {

this.image = `data:image/jpeg;base64,${imageData}`;

})

.catch(error => {

alert(error);

});

}

Nos fijamos en las opciones de CameraOptions y recordando que saveToPhotoAlbum es la funcion que nos permite guardar de una forma sencilla la imagen en la galeria.

Cargamos la vista creando el boton para llamar la funcion de capturar imagen y por otro lado lo necesario para visualizar la imagen recien capturada.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  
    <button ion-button (click)="getPicture()">Capturar Imagen</button>
    <img [src]="image" *ngIf="image" />
  
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button (click)="getPicture()">Capturar Imagen</button>

</ion-content>

Agregamos Android a nuestro proyecto y lo inicializamos en nuestro dispositivo

ionic cordova platform add android 
ionic cordova run android

1 2	ionic cordova platform add android ionic cordova run android

Rating: 4.0/5. From 1 vote.

Please wait...

Tags: camara, Ionic 3, Programación a medida

Cámara con Ionic 3

Implementando Ionic

galicaballero

0 Comments

Join the conversation

Deja un comentario Cancelar respuesta