outubro 24, 2017 Comments 8 Junior Abranches 7792 Views

[IONIC 3] – Zoom em Imagem

Olá pessoal, tudo bem?

A dica de hoje é bem simples e útil, vamos aprender facilmente a dar zoom em imagens com Ionic, ok?

Bora lá?

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

ionic start imageZoom blank

1	ionic start imageZoom blank

Uma vez criado, vamos entrar no diretório do Projeto, executando:

cd imageZoom

1	cd imageZoom

2. Instalando componente img-viewer

Bom, para facilitar nossa vida com o zoom em imagem, existem diversos componentes praticamente prontos que podemos utilizar, nesse caso mostrarei o img-viewer. Executaremos o seguinte:

npm install --save ionic-img-viewer

1	npm install --save ionic-img-viewer

Feito a instalação, vamos importar o componente no nosso projeto, no arquivo src/app/app.module.ts:

import { IonicImageViewerModule } from 'ionic-img-viewer';

{
....
}

  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicImageViewerModule
  ],

import { IonicImageViewerModule } from 'ionic-img-viewer';

{

....

}

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

IonicImageViewerModule

3. Demonstrando a imagem

Agora, já estamos aptos a utilizar o img-viewer, então vamos alterar o arquivo src/pages/home/home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Img Zoom
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSir0JxM2aPWU6TckxnV3IgmSBigs_53ErKSFf0iobarapLMMW1" #myImage (click)="presentImage(myImage)" /> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Img Zoom

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

Como o intuito aqui é simplesmente demonstrar zoom em imagem, colocamos um simples componente img, a propriedade src fica a seu critério, e definimos um id para ela, denominado #myImage.

No evento click iremos passar uma função que vai chamar o img-viewer e a mágica acontecerá: (click)=”presentImage(myImage)”

Agora, iremos construir a função presentImage, passando como parâmetro a nossa imagem, então no arquivo src/pages/home/home.ts, deixaremos assim:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { ImageViewerController } from 'ionic-img-viewer';

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

  constructor(public navCtrl: NavController, imageViewerCtrl: ImageViewerController) {
    this._imageViewerCtrl = imageViewerCtrl;
  }

  presentImage(myImage) {
    const imageViewer = this._imageViewerCtrl.create(myImage);
    imageViewer.present();
  }
}

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

import { NavController } from 'ionic-angular';

import { ImageViewerController } from 'ionic-img-viewer';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

_imageViewerCtrl: ImageViewerController;

constructor(public navCtrl: NavController, imageViewerCtrl: ImageViewerController) {

this._imageViewerCtrl = imageViewerCtrl;

}

presentImage(myImage) {

const imageViewer = this._imageViewerCtrl.create(myImage);

imageViewer.present();

}

Importamos o componente img-viewer, criamos uma variável com nome de _imageViewerCtrl onde iremos instanciar o ImageViewerController.

E por fim, criamos a função presentImage(myImage) que recebe a nossa imagem definida no src/pages/home/home.html, chamamos a instância criada, e apresentamos com o imageViewer.present().

Após executar nosso projeto, com o comando

ionic serve -l

1	ionic serve -l

ionic cordova run android

1	ionic cordova run android

ionic cordova run ios

1	ionic cordova run ios

deveremos ter algo semelhante à isso:

Algumas características de execução:

Toque na imagem para vê-la em tela cheia;
Deslize para cima / para baixo para fechar a view;
Toque na seta de navegação para fechar a view;
Toque duas vezes / aperte a imagem quando abrir para ampliar.

Bom, é isso galera…

Espero que a dica tenha sido útil à vocês, e que possam utilizá-la daqui pra frente..

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!

Share this on WhatsApp

Previous Curso grátis de Ionic 3 em português

Next [IONIC 3] - Criando elegante Slide-Show

Tags android ionic 3 ios mobile

Category Mobile

About author

Junior Abranches 19 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

8 Comments

Paladino
março 02, 00:20 Reply

Tentei mas não funciona.
Elaynne
março 13, 17:39 Reply

Funcionou mas fez minha conexão com o banco de dados parar de funcionar: Failed to load resource: net::ERR_CONNECTION_REFUSED
- david
  abril 18, 16:40 Reply
  
  kkkkkkk caraca, não tem nada a ver uma coisa com a outra. Funcionou certinho aqui, obrigado Junior!
kofmaniac
junho 22, 11:04 Reply

Funcionou direitinho, como esperado. Obrigado por compatilhar.
- Junior Abranches
  julho 03, 09:22 Reply
  
  Show de bola
Paulo Neto
outubro 15, 16:42 Reply

Junior, desde já obrigado pelo tutorial, já estou utilizando em meu projeto. Queria tirar uma dúvida: Tem algum parâmetro que eu possa utilizar para permitir o swap para outra foto?
phelipeguedes
novembro 04, 03:09 Reply

Cara, fiz essa funcionalidade em um app, deu quase tudo certo. A foto abre normalmente, dá zoom, porém ao deitar o celular para ver a imagem na horizontal, a imagem não preenche toda a tela do celular, fica um espaço preto (margem). Na minha aplicação tem várias imagens, quase todas de tamanhos diferentes, e nenhuma se encaixou na tela quando colocada na horizontal. Pode me dar uma ajuda? Valeu.
tadeu diniz
março 13, 15:00 Reply

Deu muito certo. Obrigado, parabéns pelo trabalho.

[IONIC 3] – Zoom em Imagem

1. Criar o projeto Ionic

2. Instalando componente img-viewer

3. Demonstrando a imagem

About author

You might also like

Curso completo e grátis de Ionic 2 em português

Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados

Flutter – Conhecendo o SDK mobile do Google

8 Comments

Paladino

Elaynne

david

kofmaniac

Junior Abranches

Paulo Neto

phelipeguedes

tadeu diniz

Leave a Reply

Clique aqui para cancelar a resposta.

Buscar no site

FIQUE ATUALIZADO

GRUPOS VIPS

Siga-nos

Cursos

Suporte Tecnico Trainee

Tech Lead – Web Crawling

Machine Learning Engineer

Quality Assurance (QA)

Desenvolvedor(a) Full Stack