Trabalhando com imagens em Ionic

O framework Ionic permite a criação de aplicativos multiplataforma, que podem ser desenvolvidos para Web, Android e iOS. Isso se torna possível graças à utilização do Capacitor e do Cordova, que possibilitam o acesso às funcionalidades do telefone ou do sistema operacional, como, por exemplo, o sistema de arquivos do dispositivo. No exemplo a seguir, vamos demonstrar como capturar uma imagem e salvá-la na memória do telefone.

Para essa aula vamos usar como base a documentação oficial do Ionic que se encontra nas referências desse material.

Praticando com Imagens e Capturando uma Imagem

Para dar início vamos criar um arquivo de service onde vamos criar as funções para trabalharmos com as imagens vamos continuar trabalhando com projeto criado nas aulas anteriores.

Execute o comando abaixo para criar um arquivo de service

ionic g service services/photo

Agora nesse arquivo vamos adicionar as dependências que vamos utilizar nesse pro

import { Camera, CameraResultType, CameraSource, Photo } from ‘@capacitor/camera’;
import { Filesystem, Directory } from ‘@capacitor/filesystem’;
import { Preferences } from ‘@capacitor/preferences’;

Para essas dependências funcionarem é necessário instalar as mesmas através do npm.

npm i @capacitor/core
npm i @capacitor/câmera
npm i @capacitor/filesystem
npm i @capacitor/preferences

Agora vamos continuar editando nosso arquivo de service

public async addNewToGallery() {
// Take a photo
const capturedPhoto = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
quality: 100
});
}

Essa função vai capturar a imagem da câmera ou dos arquivos do computador caso esteja executando no browser.

Agora vamos fazer uma alteração no componente, nesse caso escolhemos o componete tab3.

constructor(public photoService: PhotoService) {}
addPhotoToGallery() {
	this.photoService.addNewToGallery();
}

Agora vamos editar o HTML desse componente adicionando um fab button.

<ion-fab vertical=“bottom” horizontal=“center” slot=“fixed”>
	<ion-fab-button (click)=“addPhotoToGallery()”>
		<ion-icon name=“camera”></ion-icon>
	</ion-fab-button>
</ion-fab>

Agora temos que criar uma classe para armazenar as fotos temporariamente.

export class UserPhoto {
filepath: string = ‘’;
webviewPath: string = ‘’;
}