如何将图像传递给函数Ionic 2

时间:2017-04-07 09:10:19

标签: javascript angular typescript ionic2

我通过此代码从服务类中获取图像

 this.cameraService.getImage(this.width, this.height, this.quality).subscribe(data => this.image = data, error =>

我想将此代码传递给getVision()函数之一,以便我能够使用Google API。我知道我该怎么做?我尝试声明一个字符串变量并尝试将上面的代码放在变量中,但它不起作用。下面是代码

Camera.TS class

    export class CameraPage {



  width: number;
  height: number;
  cropper: Cropper;*/

  image:string;
  width:number = 500;
  height:number = 500;
  quality:number = 90;
  picture:string;

  labels: Array<any> = [];
  //translation
  scanning: Array<any> = [];
  choseLang: boolean = false;
  loading: boolean = false;


  constructor(public navCtrl: NavController, public navParams: NavParams,public testService: TestService,public cameraService: CameraService,public toastCtrl: ToastController) {

  }


  addPhoto(){ //take picture & return image ***
    this.cameraService.getImage(this.width, this.height, this.quality).subscribe(data => this.image = data, error =>
    {
       this.getVision(this.image);

      // Toast errot and return DEFAULT_PHOTO from Constants
      this.toast(error);


    });



  }

  toast(message: string) {
    let toast = this.toastCtrl.create({
      message: message,
      duration: 2500,
      showCloseButton: false
    });
    toast.present();
  }


  getVision(image64:string) {



  this.testService.getVisionLabels(image64:string)
    .subscribe((sub) => {

      this.labels = sub.responses[0].textAnnotations;


      this.getText();

    });

}



getText() {

  this.labels.forEach((label) => {
    let translation = {search: label.description, result: ''};

    console.log(label.description);

  });
}

}

相机服务类

  export class CameraService {
  public base64Image: string;






  constructor(public platform: Platform, public alertCtrl: AlertController, public modalCtrl: ModalController, private http: Http) {

  }



  getImage(width: number, height: number, quality: number) {
    return Observable.create(observer => {
      //Set default options for taking an image with the camera
      let imageOptions: any = {
        quality: quality,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG,
        correctOrientation: 1,
        saveToPhotoAlbum: false,
        mediaType: Camera.MediaType.PICTURE,
        cameraDirection: 1
      };

      let selectAlert = this.alertCtrl.create({
        title: 'Let\'s add a picture!',
        message: "Select how you would like to add the picture",
        enableBackdropDismiss: false,
        buttons: [{
          text: 'Albums',
          handler: data => {
            //Change sourceType to PHOTOLIBRARY
            imageOptions.sourceType = Camera.PictureSourceType.PHOTOLIBRARY;
            selectAlert.dismiss();
          }
        }, {
          text: 'Camera',
          handler: data => {
            selectAlert.dismiss();
          }
        }]
      });

      selectAlert.onDidDismiss(() => {
        this.getCameraImage(imageOptions).subscribe(image => {   //image options are either album or camera**

            let cropModal = this.modalCtrl.create(ScannerPage, { "imageBase64": image, "width": 500, "height": 500 });
            cropModal.onDidDismiss((croppedImage: any) => {
              if (!croppedImage)
                observer.error("Canceled while cropping.")
              else {
                observer.next(croppedImage);
                observer.complete();

              }
            });
            cropModal.present();


        }, error => observer.error(error));
      });
      selectAlert.present();
    });
  }



  getCameraImage(options: any) { //get base64 image
    return Observable.create(observer => {
      this.platform.ready().then(() => {
        Camera.getPicture(options).then((imageData: any) => {
          // imageData is a base64 encoded string as per options set above
          let base64Image: string = "data:image/jpeg;base64," + imageData;
          observer.next(base64Image);
          observer.complete();
        }, error => {
          observer.error(error);
        });
      });
    });
  }
}

1 个答案:

答案 0 :(得分:1)

您需要了解Observable服务返回的数据可以在<DataGrid ItemsSource="{Binding Posts}" AutoGenerateColumns="False" IsReadOnly="True"> <DataGrid.Columns> <DataGridTextColumn Header="Id" Binding="{Binding Id}" /> <DataGridTextColumn Header="Title" Binding="{Binding Title}" /> <DataGridTextColumn Header="BlogUrl" Binding="{Binding Blog.Url}" /> </DataGrid.Columns> </DataGrid> <ComboBox ItemsSource="{Binding Urls}" SelectedItem="{Binding Url}" /> 回调1中访问,而不是在回调2中访问。阅读this以获得更多说明。

.subscribe()