Jak powiększyć zdjęcia w ionicu?

Bartosz

Bartosz Stefanicki 18 grudnia 2020

Jak powiększyć zdjęcia w ionicu?

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.

Komentarze


© 2005-2023 itporady.pl. Wszystkie prawa zastrzeżone.

Używamy informacji zapisanych za pomocą cookies i podobnych technologii m.in. w celach reklamowych, statystycznych oraz dostosowania naszych serwisów do indywidualnych potrzeb użytkowników.