Jak powiększyć zdjęcia w ionicu?

Pozostałe

Bartosz Stefanicki, 22.04.2024

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\r\n\r\nNależy przejść do katalogu naszej aplikacji. Nie obejdzie się bez instalacji wtyczek, poniżej dwie komendy które trzeba wykonać:\r\n\r\nbash\r\nionic cordova plugin add com-sarriaroman-photoviewer\r\nnpm install --save @ionic-native/photo-viewer\r\n\r\n\r\nNastępnie należy pobraną wtyczkę PhotoViewer zaimportować w src/app/app.module.ts. Na samej górze wklejamy:\r\n\r\njs\r\nimport { PhotoViewer } from @ionic-native/photoviewer;\r\n\r\n\r\nA w części "providers" dodajemy PhotoViewer.\r\n\r\n## Użytkowanie\r\n\r\nWybieramy stronę na której chcemy użyć wtyczki. W jej pliku TypeScriptowym (.TS) na samej górze importujemy PhotoViewer:\r\n\r\njs\r\nimport { PhotoViewer } from @ionic-native/photoviewer;\r\n\r\n\r\nW konstruktorze dodajemy pozycję:\r\n\r\njs\r\nconstructor(public photoViewer: PhotoViewer) { }\r\n\r\n\r\nTeraz 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.\r\n\r\n## Sposób 1 - Bezpośrednio z obrazka\r\n\r\nhtml\r\n<img src="http://serwer.pl/obrazek.jpg" (click)="this.photoViewer.show(http://serwer.pl/duzy-obrazek.jpg, Mój obrazek, {share: false})">\r\n\r\n\r\n## Sposób 2 - Poprzez dodatkową funkcję\r\n\r\njs\r\n<img src="http://serwer.pl/obrazek.jpg" (click)="showImage(http://serwer.pl/duzy-obrazek.jpg)">\r\n\r\n\r\nA następnie należy dodać funkcję do pliku TS:\r\n\r\njs\r\npublic showImage (url: any) {\r\nthis.photoViewer.show(url, Mój obrazek, {share: false});\r\n}\r\n

#galeria zdjęć, #ionic. Źródło obrazków: Pixabay, Font awesome.

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Wrzesień 2024).

Komentarze

Ostatnie komentarze

Statystyki

  • 199

    Liczba porad
  • 1 996

    Liczba komentarzy
  • 5

    Narzędzi online

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

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.