Ionic 2実戦-写真機能開発

前言
アプリにはモーメンツのような機能があるので、ユーザーに写真を撮ったり、地元の写真を選んで投稿する能力を提供する必要があります.今日はIonic 2アプリでローカルカメラを呼び出す機能を実現する方法についてお話しします.ただし、クライアントに関わるため、単純なWeb版ではこの機能を完了する権限がないため、本機能はAndroidまたはiOSクライアントバージョンでのみ使用できます.
ステップ
1、慣例に従ってCordovaプラグインをインストールする
Image Picker(アルバム選択)
ionic plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker
カメラ(写真)
ionic plugin add cordova-plugin-camera
Transfer(ファイルのアップロード)
ionic plugin add cordova-plugin-file-transfer
2、カメラでファイルをアップロードする関数

  //
  // upload imgs by native camera
  uploadImgsByNativeCamera(type) {
    let options = {
      quality: 60,
      saveToPhotoAlbum: true,
      sourceType: 1,
      mediaType: 0,
      targetWidth: 1200,
      targetHeight: 1600,
    };
    if (type === 'library') {
      options.quality = 100;
      options.saveToPhotoAlbum = false;
      options.sourceType = 0;
      options.mediaType = 2;
    }

    Camera.getPicture(options).then((result) => {
      this.waiting = true;

      this.heyApp.utilityComp.presentLoading();
      console.log('the file', result);
      this.uploadFileByFileTransfer(result, this.heyApp.fileUploadService.imageUploadAPI);
    }, (err) => {
      console.log('Camera getPictures err', err);
    });
  }

  //
  // upload imgs by file transfer
  uploadFileByFileTransfer(file, api) {
    const fileTransfer = new Transfer();
    let options: any;
    options = {
      fileKey: 'file',
      fileName: file.replace(/^.*[\\\/]/, ''),
      headers: {},
    }

    fileTransfer.upload(file, api, options)
      .then((ret) => {
        this.waiting = false;

        this.heyApp.utilityComp.dismissLoading();
        let result = [{"uri": ret.response}];
        // merge imgs
        this.mergeImgs(result);
      }, (err) => {
        this.heyApp.utilityComp.dismissLoading();
        this.waiting = false;
      })
  }

3、ローカルアルバムからファイルをアップロードする関数を選択する

  //
  // upload imgs by native library
  uploadImgsByNativeLibrary() {
    let options = {
      width: 1200,
      height: 1600,
    };
    ImagePicker.getPictures(options).then((results) => {
      this.waiting = true;


      for (var i = 0; i < results.length; i++) {
        this.heyApp.utilityComp.presentLoading();
        this.uploadFileByFileTransfer(results[i], this.heyApp.fileUploadService.imageUploadAPI);
      }
    }, (err) => {
      console.log('ImagePIcker getPictures err', err);
    });
  }

  //
  // upload imgs by file transfer
  uploadFileByFileTransfer(file, api) {
    const fileTransfer = new Transfer();
    let options: any;
    options = {
      fileKey: 'file',
      fileName: file.replace(/^.*[\\\/]/, ''),
      headers: {},
    }

    fileTransfer.upload(file, api, options)
      .then((ret) => {
        this.waiting = false;

        this.heyApp.utilityComp.dismissLoading();
        let result = [{"uri": ret.response}];

      }, (err) => {
        this.heyApp.utilityComp.dismissLoading();
        this.waiting = false;
      })
  }

4、業務ロジックは以上の2つの関数を呼び出すだけで写真アップロードの機能を実現できる
最後に
興味があれば、自分で画像の切り抜き機能を作ることができます.