Ionic 3 Screenshot using Button and Shake Gesture

Ionic 3 Screenshot using Button and Shake Gesture

Used Plugins:

Screenshot Plugin:

ionic cordova plugin add com.darktalker.cordova.screenshot
npm install --save @ionic-native/screenshot

Shake Plugin:

ionic cordova plugin add cordova-plugin-shake
npm install --save @ionic-native/shake

Vibration Plugin :

ionic cordova plugin add cordova-plugin-vibration
npm install --save @ionic-native/vibration

Create Your Project:

ionic start screenshotProject

Change Directory To Your Ionic Project:

cd screenshotProject

Add Page To Your Application : 

ionic g page screenshot

Add the following in app,module.ts 

import { ScreenshotPage } from '../pages/screenshot/screenshot';

declarations:[
.....
ScreenshotPage
],
entryComponents : [
....
ScreenshotPage
]

Add the following code in screenshot.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Screenshot Ionic</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div text-center>
    <button ion-button (click)="saveScreenshot()">Save Screenshot</button>
    <h4>(or)</h4>
    <button ion-button (click)="takeScreenShot()">Take Screenshot</button>
    <h4>Take Screenshot returns URL of image </h4>
    <h4>(or)</h4>
    <h5>Shake Your Phone To Have a Screenshot</h5>
  </div>
</ion-content>

Add The Following Code In screenshot.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Screenshot } from '@ionic-native/screenshot';
import { Shake } from '@ionic-native/shake';
import { Vibration } from '@ionic-native/vibration';

@IonicPage()
@Component({
  selector: 'page-screenshot',
  templateUrl: 'screenshot.html',
    providers: [Screenshot,Shake,Vibration]
})
export class ScreenshotPage {
  date: any;
  dateString : any;
  watch = this.shake.startWatch(40).subscribe(() => {
      this.saveScreenShot();
      this.vibration.vibrate(500);
  });
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private alertCtrl : AlertController,
    private screenshot: Screenshot,
    private shake: Shake,
    private vibration: Vibration) {
  }

  saveScreenShot(){
    console.log("inside save screenshot");
    this.date=new Date();
    this.dateString="Img-"+this.date.getFullYear()+"_"+this.date.getMonth()+"_"+this.date.getDate()+"_"+this.date.getHours()+"_"+this.date.getMinutes()+"_"+this.date.getSeconds();
    this.screenshot.save('jpg', 80, this.dateString).then(result=>{
      console.log("success response : "+ JSON.stringify(result));
      let alert = this.alertCtrl.create({
        title: 'Notification',
        subTitle: "Check your Gallery",
        buttons: [
          {
            text: 'OK'
          }
        ]
      });
      alert.present();
    }, error=>{
      console.log("error response : "+ error);
    });
  }

  takeScreenShot(){
  console.log("inside take screenshot");
  this.screenshot.URI(80).then(response=>{
    console.log("response from take: "+ JSON.stringify(response));
    let alert = this.alertCtrl.create({
      title: 'File Name',
      subTitle: "File URL is base64 and too big to display",
      buttons: [
        {
          text: 'OK'
        }
      ]
    });
    alert.present();
  }, error=>{
    console.log("response from take error : "+ error);
  });
}
}

Run The Application: 

ionic cordova run android

Input :

Shake your phone or click any of the button displayed