使用したもの(環境)
- cordova
- visualStudioCode
- windows10
- Android
チュートリアルを訳しながらやってみる
チュートリアルのページは下記。
Module 14: Using the Camera API
前回のチュートリアル。
環境構築については別途まとめてあるので下記参照。
cordova&VSCodeで環境を構築するまでの右往左往メモ。
Module 14: Using the Camera API
In this section, you use the Cordova Camera API to provide the user with the ability to take a picture of an employee, and use that picture as the employee's picture in the application.
このセクションでは、従業員の写真を撮りアプリケーション内の従業員の写真として使える機能を提供する、CordovaのCamera APIを使用していましょう。
We do not persist that picture in this sample application.
このサンプルアプリケーションでは、この写真をそのまま使用していません。
以下のコードは、アプリケーションをCordovaアプリケーションとしてデバイス上で実行している場合にのみ動作します。
つまり前回と同じで、デスクトップ上のブラウザでテストすることはできません。
1. カメラプラグインをプロジェクトに追加します。
cordova plugin add cordova-plugin-camera
2. index.htmlの employeeテンプレートに下記を追加します。
<li class="table-view-cell media">
<a hre="#" class="push-right change-pic-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Change Picture
</div>
</a>
</li>
3. EmployeeViewのinitializeメソッドに、下記コードを追加します。
this.$el.on('click', '.change-pic-btn', this.changePicture);
4. EmployeeViewでchangePictureイベントハンドラを定義します。
this.changePicture = function(event) {
event.preventDefault();
if (!navigator.camera) {
alert("Camera API not supported", "Error");
return;
}
var options = { quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Album
encodingType: 0 // 0=JPG 1=PNG
};
navigator.camera.getPicture(
function(imgData) {
$('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
},
function() {
alert('Error taking picture', 'Error');
},
options);
return false;
};
テスト前に解説を。
詳しいことはreadmeを読めばわかると思うのでざっくりだけ解説します。
https://github.com/apache/cordova-plugin-camera
チュートリアルでは、
camera.getPicture(successCallback, errorCallback, options)
を使用しています。
quality: 50, // 保存されたイメージの品質。0〜100の範囲で表されます。100は通常、ファイル圧縮による損失なしでフル解像度です。
destinationType: Camera.DestinationType.DATA_URL, // 戻り値の形式を選択します。この場合はbase64でエンコードされた文字列で返却されます。
sourceType: 1, // 画像のソース元を選択します。コード中のコメントにもある通り、1はカメラです。
encodingType: 0 // 返される画像ファイルのエンコーディングを選択します。コード中のコメントにもある通り、0はJPGです。
ほかパラメータの解説は、下記にありますので、気になったら読んでみてください。
https://github.com/apache/cordova-plugin-camera#module_camera.CameraOptions
successCallbackとerrorCallbackはそのまま処理成功時と処理失敗時のコールバックファンクションを渡します。
チュートリアル中のコードでは、成功した場合は
changePictureのイベントが設定されたmedia-objectクラスを持つ要素のsrc属性に"data:image/jpeg;base64,"+imgDataを設定します。(imgDataはカメラから取得した画像のURL)
エラーの場合はアラートを表示します。
5. アプリケーションをテストしてみましょう。
人ではないですが、最近のお気に入りのカップを撮影してみました。
ただし、変更を保存する機能はないので、最初の画面に戻ると画像は戻ってしまいます。