1. 程式人生 > >ionic3 實現拍照與從相簿選擇功能

ionic3 實現拍照與從相簿選擇功能

參考了很多網上的資料,但是每個人遇到的問題都不一樣,我這裡出現的問題,可能是node版本,還有外掛版本之類的問題,問題以及解決方式可以看這個圖。

一、外掛依賴引入

 (1)配置相機

在控制行輸入命令:

ionic cordova plugin add cordova-plugin-camera

npm install --save @ionic-native/camera

在app.module.ts問價中配置資訊

import {Camera,CameraOptions} from '@ionic-native/camera';

然後註冊依賴即可

providers: [
  Camera
]
(2)儲存資料到指定相簿中
$ ionic cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos"
$ npm install --save @ionic-native/photo-library

  (3)從相簿中獲取

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
$ npm install --save @ionic-native/image-picker

 

import {ImagePicker, ImagePickerOptions} from "@ionic-native/image-picker";

二、元件使用

在需要用到的檔案中這樣使用呼叫外掛

responseActionEvent() {
    let actionSheet = this.actionSheetCtrl.create({
      buttons: [{
        text: '拍照',
        role: 'takePhoto',
        handler: () => {
          this.takePhoto();
        }
      }, {
        text: '從相簿選擇',
        role: 'chooseFromAlbum',
        handler: () => {
          this.chooseFromAlbum();
        }
      }, {
        text: '取消',
        role: 'cancel',
        handler: () => {
          console.log("cancel");
        }
      }]
    });

    actionSheet.present().then(value => {
      return value;
    });
  }
  // 照相
  takePhoto() {
    const options: CameraOptions = {
      //圖片質量,越高質量越好(0~100)
      quality: 100,
      //允許編輯
      allowEdit: true,
      targetWidth: 200,
      targetHeight: 200,
      //是否允許儲存到相簿
      saveToPhotoAlbum: true,
      //圖片路徑
      destinationType:this.camera.DestinationType.FILE_URI,
      //媒體型別,圖片、視訊等
      mediaType:this.camera.MediaType.PICTURE,
    };

    this.camera.getPicture(options).then(imageURI => {
      let base64Image = 'data:image/jpeg;base64,' + imageURI;
      alert(base64Image);
      console.log('Image URI: ' + imageURI);
      this.avatar = imageURI.slice(7);
    }, error => {
      console.log('Error: ' + error);
      alert("版本不相容,從相簿選擇!");
    });
  }
  // 從相簿中選擇
  chooseFromAlbum() {
    const options: ImagePickerOptions = {
      maximumImagesCount: 1,
      width: 200,
      height: 200
    };
    this.imagePicker.getPictures(options).then(images => {
      if (images.length > 1) {
        this.presentAlert();
      } else if (images.length === 1) {
        console.log('Image URI: ' + images[0]);
        this.avatar = images[0].slice(7);
      }
    }, error => {
      console.log('Error: ' + error);
    });
  }

  presentAlert() {
    let alert = this.alertCtrl.create({title: "上傳失敗", message: "只能選擇一張圖片作為頭像哦", buttons: ["確定"]});
    alert.present().then(value => {
      return value;
    });
  }

  //儲存照片
  saveImage() {
    const actionSheet = this.actionSheetCtrl.create({
      title: '提示',
      buttons: [
        {
          text: '儲存本地',
          handler: () => {
            //1、請求使用者授權
            this.photoLibrary.requestAuthorization().then(() => {
              //2、授權成功
              this.photoLibrary.getLibrary().subscribe(
                {
                  next: library => {
                    library.forEach(function (libraryItem) { });
                    //3、儲存圖片
                    this.photoLibrary.saveImage(ImageUrl圖片的url, '相簿名字').then(() => {
                      alert('儲存成功')
                    })
                  },
                  error: err => {
                    alert('儲存失敗!')
                  },
                  complete: () => {
                    console.log('沒有獲取圖片資訊');
                  }
                });
            })
              .catch(err => alert('獲取失敗!'));
          }
        },
        {
          text: '取消',
          role: 'cancel'
        }
      ]
    })
    actionSheet.present();
  }

 如有不懂,推薦查閱文章:https://segmentfault.com/a/1190000011099097