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});
}
Kategorie: Pozostałe. Tagi: #galeria zdjęć, #ionic. Źródło obrazków: Pixabay, Font awesome.
