Native Screenshot doesn't work


#1

Hi,

I’m trying to use ionic2 native Screenshot, at the moment, with no luck.

This is my code (ts):

Screenshot.URI(90).then(
    (res) => {
        console.log(res);                       
    },
    () => {
        console.log('error');
        let alert = Alert.create({
            title: 'Error',
            subTitle: 'Screenshot',
            message: 'There was an error while trying to take screenshot.',
            buttons: ['OK']
        });
        this.nav.present(alert);
    }
);

Obviously, I include Screenshot from ionic-native …

import {Screenshot} from 'ionic-native';

… and I have the screenshot plugin installed.

The documentation not provides any example and I don’t know if I’m doing something wrong.

When I run the app in a real device there is no log at all.

My sistem information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v5.11.1
Xcode version: Xcode 7.3 Build version 7D175 

Any help will be appreciated. Thanks in advance.


#2

I am having similar issues bit in Ionic 1, I think we are dealing with a permissions issues with Android 6.0 and newest iOS where it doesn’t request file read/write permissions. Still investigating myself, but I know on Android you can get around this by targeting a lower sdk version with the following in your config.xml file:

<preference name="android-targetSdkVersion" value="22"/>

#3

Did you ever get this screenshot issue resolved


#4

I’m taking screenshot using below code.

 Screenshot.save()
    .then(res => { 
        console.log(res.filePath);
    })
    .catch(() => console.error("screenshot error"));

#5

Ive used this method. Did you ever use some typescript to automate the process


#6

how can you save the snapshot to firebase


#7

I’m using your same idea here and I can’t get it to go through. I’m relatively new to Ionic though so i’m not sure if there’s more I’m missing.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Screenshot } from '@ionic-native/screenshot';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public bridgeStatus;
  public destroy;

  constructor(public navCtrl: NavController, private screenshot: Screenshot) {
    this.bridgeStatus = 'fair'
    this.destroy = function() {
      console.log('screenshot', screenshot)

      screenshot.save('jpg', 80, 'myscreenshot.jpg')
      .then(res => {
        console.log(res.filepath)
      })
      .catch(() => console.error("screenshot error"))


      console.log('destroy hit')
      return this.bridgeStatus = 'Destroyed'
    }

  }

}

and i have it loaded into my ngModel here.

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

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

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

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Screenshot,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

any help would be great!


#8

also my .html.
there is a simple function to call screenshot and also change a var on the html.

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    the bridge is {{bridgeStatus}}
  </p>
  <button (click)="destroy()">Destroy</button>
</ion-content>

#9

Don’t ever type the word ‘function’ inside of the body of one. Always use arrow functions or lambdas. In this case, destroy() should just be an ordinary object method, and it doesn’t make sense for it to be returning anything.