Jak powiększyć zdjęcia w ionicu?

Jak powiększyć obrazek w aplikacji ionic? Można to zrobić szybko i bezproblemowo, ponieważ rozwiązanie podsuwa sam zespół Ionica.

Instalacja wymaganych wtyczek

Należy przejść do katalogu naszej aplikacji. Nie obejdzie się bez instalacji wtyczek, poniżej dwie komendy które trzeba wykonać:

ionic cordova plugin add com-sarriaroman-photoviewer
npm install --save @ionic-native/photo-viewer

Następnie należy pobraną wtyczkę PhotoViewer zaimportować w src/app/app.module.ts. Na samej górze wklejamy:

import { PhotoViewer } from '@ionic-native/photoviewer';

A w części "providers" dodajemy PhotoViewer.

Użytkowanie

Wybieramy stronę na której chcemy użyć wtyczki. W jej pliku TypeScriptowym (.TS) na samej górze importujemy PhotoViewer:

import { PhotoViewer } from '@ionic-native/photoviewer';

W konstruktorze dodajemy pozycję:

constructor(public photoViewer: PhotoViewer) { }

Teraz już możemy zabrać się do użytkowania wtyczki. Można to zrobić na dwa sposoby - albo wywołujemy wtyczkę bezpośrednio z obrazka, albo definiujemy nową funkcję w TS. Oba rozwiązania prezentuję poniżej.

Sposób 1 - Bezpośrednio z obrazka

<img src="http://serwer.pl/obrazek.jpg" (click)="this.photoViewer.show('http://serwer.pl/duzy-obrazek.jpg', 'Mój obrazek', {share: false})">

Sposób 2 - Poprzez dodatkową funkcję

<img src="http://serwer.pl/obrazek.jpg" (click)="showImage('http://serwer.pl/duzy-obrazek.jpg')">

A następnie należy dodać funkcję do pliku TS:

public showImage (url: any) {
this.photoViewer.show(url, 'Mój obrazek', {share: false});
}

Komentarze