Camera pluginのサンプル

Camera pluginは、iPhoneやAndroidでCamera機能や端末上にある写真データ等にアクセスが簡単にアクセスが可能である。※詳細はgitページを参照。

インストール：
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

ソースへの記述：
import { Camera, CameraOptions } from '@ionic-native/camera'; //インポート

constructor(private camera: Camera) { } //Constructorへの追加

const options: CameraOptions = { //オプションの設定
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE //写真撮影（振舞いが変わる）
}

this.camera.getPicture(options).then((imageData) => {
//ここでデータが取得される。destinationTypeにより取得データタイプが変わる
}, (err) => {
//ここでエラーが取得される。
}

サンプルプログラム：

　//撮影写真を利用する
 takePicture() {
    let cameraOptions: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
    };
    this.camera.getPicture(cameraOptions).then((imageURI) => {
      //イメージの表示
      this.image.style.display = 'block';

      //イメージ表示完了
      this.image.onload = this.ImageLoadFunc;
      //イメージのセット
      this.image.src = "data:image/jpeg;base64," + imageURI;
    }, (err) => {        console.log(err);
    });
  }

  selectPicture() {
    let cameraOptions: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
    };
    this.camera.getPicture(cameraOptions).then((imageURI) => {
      //イメージの表示
      this.image.style.display = 'block';      

      //イメージ表示完了
      this.image.onload = this.ImageLoadFunc;
      //イメージのセット
      console.log("imageURI:", imageURI)
      this.image.src = "data:image/jpeg;base64," + imageURI;
    }, (err) => {        console.log(err);
    });
  }

  //アクションシートの表示（ここから写真から
  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      buttons: [
        {
          text: '写真を撮る',
          handler: () => {
            console.log('Destructive clicked');
            this.takePicture();
          }
        },
        {
          text: '写真から選択',
          handler: () => {
            console.log('Archive clicked');
            this.selectPicture();
          }
        },
        {
          text: '取り消し',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });

    actionSheet.present();
  }

ブログ

カテゴリ