カメラ・プラグインの利用
ここでは 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 に取り込む方法、及び、アンドロイド端末内に画像を保存する方法を示しました。