Jak powiększyć zdjęcia w ionicu?
Pozostałe

Jak powiększyć zdjęcia w ionicu?

Data aktualizacji: 18.12.2020

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 (Maj 2022).

Autor: Bartosz Stefanicki. Data publikacji: 20.09.2017 r. Tagi: galeria zdjęć, ionic. Źródło obrazka porady: Logo Ionic.

Komentarze

Statystyki

  • 179

    Liczba porad
  • 1 801

    Liczba komentarzy
  • 6

    Narzędzi online

© 2005-2022 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.