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