Como tirar fotos com Ionic de maneira simples

Nessa aula eu vou te mostrar como tirar fotos com o Ionic de maneira simples.

Esse tutorial está utilizando as seguintes versões das dependências

• Ionic: 3.19.0

Criando uma aplicação de exemplo

O passo a passo abaixo é o mesmo mostrado no vídeo.

• Passo 1: Criar o aplicativo
• Passo 2: Adicionar as plataformas do Android/iOS
• Passo 3: Instalar o plugin da câmera do Ionic Native
• Passo 4: Alterar a página Home

 

Passo 1: Criar o aplicativo

ionic start NOME_DO_APP blank

 

Passo 2: Adicionar as plataformas do Android/iOS

ionic cordova platform add android

 

Passo 3: Instalar o plugin da câmera do Ionic Native

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

 

No arquivo app.module.ts adicionar a o provider “Camera”

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,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Camera
  ]
})
export class AppModule {}

 

Passo 4: Alterar a página Home

Arquivo home.ts

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { transition } from '@angular/core/src/animation/dsl';

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

  constructor(private camera: Camera) { }

  takePicture() {
    this.photo = '';

    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      allowEdit: true,
      targetWidth: 100,
      targetHeight: 100
    }

    this.camera.getPicture(options)
      .then((imageData) => {
        let base64image = 'data:image/jpeg;base64,' + imageData;
        this.photo = base64image;

      }, (error) => {
        console.error(error);
      })
      .catch((error) => {
        console.error(error);
      })
  }

}

 

Arquivo home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Câmera
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <img src="{{ photo }}" />
</ion-content>

<ion-footer padding>
  <button ion-button large block (click)="takePicture()">Câmera</button>
</ion-footer>

 

Clique no botão abaixo para ver o código fonte gerado nessa aula

[button style=”btn-primary btn-lg” type=”link” target=”true” title=”Código fonte gerado na aula” link=”https://github.com/fabricadecodigo/IonicCameraExample” linkrel=””]

 

Referências

• Ionic Native – Câmera: https://ionicframework.com/docs/native/camera/

 

Gostou desse artigo? Aproveite e curta e compartilhe para que mais pessoas possam também visualiza-lo!

Ainda ficou alguma dúvida ou tem alguma sugestão? Deixa aí nos comentários!