W jaki sposób w aplikacji stworzonej w ionicu powiększyć jakiś obrazek? 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});
}
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Czerwiec 2023).
Data publikacji: 20.09.2017 r. Tagi: galeria zdjęć, ionic. Źródło obrazka porady: Logo Ionic.