3D プリンター入門

ホーム > ネイティブ > カメラ・プラグインの利用

カメラ・プラグインの利用

ここでは Ionic アプリケーションから写真を撮影して、ページに取り込む方法を説明します。

また撮影した画像を端末に保存する方法も紹介します。

このページのサンプルでは、次のように撮影を開始(カメラを起動)するボタンがあり・・・

ボタンを押すとカメラが起動して撮影できます。撮影した内容について Confirm (確認) とすると・・・

元の画面に戻りますが、このときに撮影した画像がページに表示されます。

これを実現する方法を以下に示します。

カメラプラグインの利用

ページの作成とプラグインの追加

ここでは camera1 というプロジェクトを作成して、cameraPage というカメラを起動するページを作成します。 さらに、カメラを利用するためのプラグイン cordova-plugin-camera も追加します。

全体的な流れは「バーコードスキャナプラグインの利用」と同様です。

$ ionic start camera1 blank --v2
$ cd camera1
$ ionic platform add android
$ ionic g page cameraPage
$ ionic plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

ポイントとなる src/pages/camera-page フォルダ以下について、以下にコードを示します。 CameraPageModule モジュールを AppModule に取り込むなどの箇所は省略しますので、不明点があったら 「バーコードスキャナプラグインの利用」などを参考にしてください。

ページテンプレート src/pages/camera-page/camera-page.html は以下の通りです。

<ion-header>
  <ion-navbar>
    <ion-title>Camera Sample</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button (click)="takePicture()">Take a picture</button>
  <div *ngIf="imgSrc">
    <img src="{{imgSrc}}" alt="" class="img-taken">
  </div>
</ion-content>

カメラページのコード src/pages/camera-page/camera-page.ts は次の通り。

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@IonicPage()
@Component({
  selector: 'page-camera-page',
  templateUrl: 'camera-page.html',
  providers: [ Camera ],
})
export class CameraPage {

  imgSrc: string;

  constructor( private camera: Camera ) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CameraPage');
  }

  takePicture(){
    const options: CameraOptions = {
      quality: 75,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    };

    this.camera
      .getPicture(options)
      .then((imageData)=>{
        let base64Image = 'data:image/jpeg;base64,' + imageData;
        this.imgSrc = base64Image;
      })
      .catch((err)=>{
        console.log(err);
      });
  }

}

撮影した画像を img に単純に設定するとサイズが大きすぎてはみ出るので、CSS クラスを設定しています。

せっかくなので SCSS 的に幅をパラメータ化して書いてみましょう。

$image-width: 95%;

.img-taken {
  max-width: $image-width;
}

念のため CSS が正しく生成されたかデバッガで確認すると次のように、確かに 95% が max-width に設定されていることが確認できます。

上記によって、Take a Picture ボタンを押しカメラを起動したのち、Confirm (確認) を押すと、ページ内の img タグに写真がセットされます。

撮影した画像ファイルを保存

さらに上記で撮影した画像をギャラリに保存してみましょう。

撮影されたデータは Base64 で受けとります。Base64 データをギャラリに保存するためのプラグインである、 その名も Base64 To Gallery をインストールします。

$ ionic plugin add cordova-base64-to-gallery
$ npm install --save @ionic-native/base64-to-gallery

尚、このプラグインは PNG 形式での保存のみをサポートしていたので、JPEG 保存のため少しだけ改造して使いました。ここでは Android のみをプラットフォームとしています。

この辺はドキュメントされたものでもないので、適当に状況に応じて変更してください。参考までに変更箇所を載せておきます。

カメラページでは次のように DI で Base64ToGallery のオブジェクトを受け取り、

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Base64ToGallery } from '@ionic-native/base64-to-gallery';

@IonicPage()
@Component({
  selector: 'page-camera-page',
  templateUrl: 'camera-page.html',
  providers: [ Camera, Base64ToGallery ],
})
export class CameraPage {

  imgSrc: string;

  constructor(
    private camera: Camera,
    private base64ToGallery: Base64ToGallery ) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CameraPage');
  }

  takePicture(){
    const options: CameraOptions = {
      quality: 75,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    };

    this.camera
      .getPicture(options)
      .then((imageData)=>{
        let base64Image = 'data:image/jpeg;base64,' + imageData;
        this.imgSrc = base64Image;

        // 画像を保存
        this.base64ToGallery.base64ToGallery(
          imageData,
          {prefix: 'myimg_'}
        )
        .then((res)=>{
          console.log(`OK - ${res}`);
        })
        .catch((err)=>{
          console.log(`Error ${err}`);
        });

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

}

base64ToGallery というメソッドを呼ぶだけなので簡単ですね。

以上で、カメラプラグインを利用して画像を HTML に取り込む方法、及び、アンドロイド端末内に画像を保存する方法を示しました。

ホーム > ネイティブ > カメラ・プラグインの利用