Saturday, 17 March 2018

How to Implement Photo Viewer in Ionic 2 and Ionic 3

Photo Viewer plugin in IONIC NATIVE is intended to show a picture from an URL with zoom features. This plugin can display the given image in full screen with the ability to pan, zoom, and share the image.
In this Post we are going to look at how to view an image in ionic app with zoom, pan and share features.


This post assumes that you already have the ionic project created and running. lets create a page in our project to implement the photo viewer example.

Create a photoviewer page


Execute below command in your projects command prompt to add photoviewer page to your project "pages" folder in "src" directory.

ionic generate page photoviewer. 

the above code will generate photoviewer folder in your project's src/pages folder.
Note : import the photoviewer page in to your app module and add it to the declarations and entryComponents, if your cli does not create an "photoviewer.module.ts" file in your newly created page (ie. photoviewer folder).
The "app.module.ts" should look something like this after photoviewer page is imported.

Modify app.module.ts file

app.module.ts



        import { BrowserModule } from '@angular/platform-browser';
        import { ErrorHandler, NgModule } from '@angular/core';
        import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

        import { MyApp } from './app.component';
        import { HomePage } from '../pages/home/home';
        import { ListPage } from '../pages/list/list';
        import { PhotoviewerPage } from '../pages/photoviewer/photoviewer';

        import { StatusBar } from '@ionic-native/status-bar';
        import { SplashScreen } from '@ionic-native/splash-screen';

        @NgModule({
        declarations: [
            MyApp,
            HomePage,
            ListPage,
            PhotoviewerPage 
        ],
        imports: [
            BrowserModule,
            IonicModule.forRoot(MyApp)

        ],
        bootstrap: [IonicApp],
        entryComponents: [
            MyApp,
            HomePage,
            ListPage,
            PhotoviewerPage 
        ],
        providers: [
            StatusBar,
            SplashScreen,
            {provide: ErrorHandler, useClass: IonicErrorHandler},

        ]
        })
        export class AppModule {}


That's it for the app.module.ts part. Now for the plugin and functionality part.
First install the Photo Viewer plugin from IONIC NATIVE. execute the below commands in your projects command prompt.
ionic cordova plugin add com-sarriaroman-photoviewer

npm install --save @ionic-native/photo-viewer

Now, Since the plugin is installed, import the plugin to your component, and also inject into your components constructor. Modify your components photoviewer.ts file as shown below.

  import { PhotoViewer } from '@ionic-native/photo-viewer';
  ...
  constructor(...,private photoViewer: PhotoViewer) { 
   ...
  }


Modify photoviewer.ts file.

photoviewer.ts



      import { Component } from '@angular/core';
      import { IonicPage, NavController, NavParams } from 'ionic-angular';
      import { PhotoViewer } from '@ionic-native/photo-viewer';

      /**
       * Generated class for the PhotoviewerPage page.
       *
       * See https://ionicframework.com/docs/components/#navigation for more info on
       * Ionic pages and navigation.
       */

      @IonicPage()
      @Component({
        selector: 'page-photoviewer',
        templateUrl: 'photoviewer.html',
      })
      export class PhotoviewerPage {
        imageSrc:string;
        constructor(public navCtrl: NavController, public navParams: NavParams,private photoViewer: PhotoViewer) {
          this.imageSrc = "https://4.bp.blogspot.com/-gV5KXvihmtY/WbAkZXv-S8I/AAAAAAAAAig/CaU_-gxdB68iBsMARMr8A0KqhjHFhZ5LQCLcBGAs/s320/logoionicsynclarge.png";
        }

        ionViewDidLoad() {
          console.log('ionViewDidLoad PhotoviewerPage');
        }

        showImagewithTitle(img){
          this.photoViewer.show(img, 'My image title', {share: true});
        }

        showImage(img){
          this.photoViewer.show(img);
        }
      }




To make it simple i'm only adding one image to the imageSrc variable. here we have two functions showImagewithTitle & showImage. showImage function only displays the image with no further options but showImagewithTitle function has the option of displaying the image with title and share options.

Modify photoviewer.html file

photoviewer.html


  <ion-header>

  <ion-navbar>
    <ion-title>photoviewer</ion-title>
  </ion-navbar>

  </ion-header>

  <ion-content padding>
    <div style="text-align:center;" style="box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);text-align: 
  center;">
        <img src="{{imageSrc}}}" (click)="showImage(imageSrc)" />
  </div>

  </ion-content>


That's it, this example will not work in web, so build the project and run it on device to check the PhotoViewer in action. fell free to comment below if you have any queries.

1 comment: