从图库中选取图像时,ionic 3崩溃应用程序

时间:2019-02-15 10:41:11

标签: angular ionic3

我正在构建一个应用程序,但是当我使用图像选择器从2个选项更新配置文件时,我正在构建应用程序。第一个是从相机拍摄图像,另一个是从图库中获取图像。我使用图像选择器来执行此功能,当我从相机拍摄照片时可以正常工作。但是当我从画廊中选择它时,应用程序崩溃并冻结了一些时间。也尝试在控制台上检查它,但是在console上没有错误显示。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, normalizeURL, Thumbnail, 
Events } from 'ionic-angular';
import { ActionSheetController } from 'ionic-angular'

import { ApiProvider } from '../../providers/api/api';
import { AuthProvider } from '../../providers/auth/auth';
import { HelperProvider } from '../../providers/helper/helper';

import {Camera, CameraOptions } from '@ionic-native/camera';
import { ImagePicker } from '@ionic-native/image-picker';
import { User } from '../../datamodel/user';
import { AngularFireStorage, AngularFireUploadTask } from 
'@angular/fire/storage';
import { UploadTaskSnapshot } from '@angular/fire/storage/interfaces';

@IonicPage()
@Component({
  selector: 'page-updateprofile',
  templateUrl: 'updateprofile.html',
})
export class UpdateprofilePage { 
  goBack(){ 
    this.navCtrl.setPages([{'page':'ProfilePage'}])
}

  constructor(private api:ApiProvider,private helper:HelperProvider, private auth:AuthProvider,private camera: Camera,
    public navCtrl: NavController, public navParams: NavParams,private actionSheet:ActionSheetController,
    private imagePicker: ImagePicker,private storage:AngularFireStorage,private events:Events
    ) {
  }


  user:User;

  ionViewDidLoad() {
    console.log('ionViewDidLoad UpdateprofilePage');
    this.api.getProfile(localStorage.getItem('uid')).subscribe((resp:User)=> 
   {
    this.user = resp;
      console.log(this.user);
    })
  }

  updateProfile(){
  this.api.updateProfile(this.user.uid, this.user).then(resp=>{
  this.events.publish('user:loggedIn',this.user);
  this.helper.toast(`Profile updated successfully.`)

   },err=>this.helper.toast(`Error Upating Profile.`))
   }


  options: CameraOptions = {
   quality: 100,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE
 }
 takePicture(){
   this.camera.getPicture(this.options).then((imageData) => {
    this.helper.load();
    const image=`data:image/jpeg;base64,${imageData}`;
    const pictures=this.storage.ref('profile/'+this.user.uid);
    pictures.putString(image,'data_url').then((r:UploadTaskSnapshot)=>{
    debugger;
    r.ref.getDownloadURL().then(re=>{
    this.user.photo=re;
    this.helper.dismiss();
    },err=>{
      this.helper.presentAlert('error',err,'ok');
    })
  },err=>{
    console.log(err);
    this.helper.toast(err);
    this.helper.dismiss();
  });

 }, (err) => {
  console.log(err);

 });
 }


changeProfilePic(){
let sheet=this.actionSheet.create({
  buttons:[
    {
      text:'Select From Gallery',
      icon:'images',
      handler:()=>{
        console.log('select images form gallery');
        this.pickImageFromGallery();
      } 
    },
    {
      text:'Select from Camera',
      icon:'camera',
      handler:()=>{
        console.log('select from camera');
        this.takePicture();
      }
    },
    {
      text: 'Cancel',
      icon:'close-circle',
      role: 'destructive',
      handler: () => {
        console.log('cancel clicked');
      }
    },
  ]
})

sheet.present();
  }

 pickImageFromGallery(){


this.imagePicker.getPictures({maximumImagesCount:1,outputType:1}).then((res) 
   => {
  if(res){
    if(res.length>0){
      this.helper.load();
      const image=`data:image/jpeg;base64,${res}`;
      const pictures=this.storage.ref('profile/'+this.user.uid);
      pictures.putString(image,'data_url').then(r=>{
      r.ref.getDownloadURL().then(res=>{
        this.user.photo=res;
        this.helper.dismiss();
      })
      },err=>{
        this.helper.dismiss();
        console.log(err);
      });    
    }else{
      this.helper.toast('you didnt selected any image from the gallary');
      this.helper.dismiss();  
    }

  }else{
    this.helper.toast('you didnt selected any image from the gallary');
    this.helper.dismiss();
  }
  //this.user.photo='data:image/jpeg;base64,'+res;


}, (err) => { 
  console.log('failed to get images from gallery');

});
}

}

0 个答案:

没有答案