カメラ制御
camera
オブジェクトは、デバイスのカメラアプリへの制御を提供します。
メソッド
camera.getPicture
デバイスのカメラで写真を撮る、またはデバイスのアルバム内にある写真を検索します。 Base64形式でエンコードされたフォトイメージを表す文字列、またはイメージファイルのURIが返されます。
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
概要
camera.getPicture
関数はデバイスが標準で備えるカメラアプリを実行します。
( この際Camera.sourceType = Camera.PictureSourceType.CAMERA
に設定する必要がありますが、デフォルトの設定となります。)
写真の撮影が完了するとカメラアプリは終了し、アプリケーションに戻ります。
Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY
もしくは
Camera.PictureSourceType.SAVEDPHOTOALBUM
が指定された場合、
写真選択ダイアログが表示され、アルバムから写真を選択できるようになります。
返り値は cameraSuccess
関数に送信されます。値は cameraOptions
の設定に従い、以下のいずれかのフォーマットで送られます。
- Base64形式でエンコードされたフォトイメージを表す文字列 (デフォルト)
- ローカルストレージ内に記録されたファイルの場所を表す文字列
エンコードされたイメージやURIをもとに、以下のような処理の記述が可能です。。
-
タグで画像を表示 (下記の例を参考にしてください)
- データをローカルに保存 (
LocalStorage
や Lawnchair を使用します) - データをリモートサーバーに送信
注意: iPhone 4 や Black Berry Touch 9800 などの最新デバイスで撮影したイメージの画質は良好です。 ただし、そのような画像データをBase64でエンコードすると、メモリーの問題が発生します。 よって、 FILE_URI を Camera.destinationType として使用することが推奨されます。
サポートされているプラットフォーム
- Android
- Blackberry WebWorks (OS 5.0 以上)
- iPhone
使用例
撮影した写真をBase64形式のイメージとして取得します。
navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('エラーが発生しました: ' + message);
}
撮影した写真のURIを取得します。
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('エラーが発生しました: ' + message);
}
詳細な使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>写真を撮ってみよう</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // 写真ソース
var destinationType; // 戻り値のフォーマット
// PhoneGapがデバイスと接続するまで待機
//
function onLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
// PhoneGap準備完了
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// 写真の撮影に成功した場合(その1)
//
function onPhotoDataSuccess(imageData) {
// 下記のコメントを外すことでBase64形式のデータをログに出力
// console.log(imageData);
// 画像ハンドルを取得
//
var smallImage = document.getElementById('smallImage');
// 画像要素を表示
//
smallImage.style.display = 'block';
// 取得した写真を表示
// 画像のリサイズにインラインCSSを使用
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// 写真の撮影に成功した場合(その2)
//
function onPhotoURISuccess(imageURI) {
// 下記のコメントを外すことでファイルURIをログに出力
// console.log(imageURI);
// 画像ハンドルを取得
//
var largeImage = document.getElementById('largeImage');
// 画像要素を表示
//
largeImage.style.display = 'block';
// 取得した写真を表示
// 画像のリサイズにインラインCSSを使用
//
largeImage.src = imageURI;
}
// ボタンがクリックされた場合の処理
//
function capturePhoto() {
// 撮影した写真をBase64形式の文字列として取得する場合
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
// ボタンがクリックされた場合の処理
//
function capturePhotoEdit() {
// 撮影した写真を編集したあと、Base64形式の文字列として取得する場合
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
}
// ボタンがクリックされた場合の処理
//
function getPhoto(source) {
// 撮影した写真をファイルURIとして取得する場合
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// エラー発生時の処理
//
function onFail(mesage) {
alert('エラーが発生しました: ' + message);
}
</script>
</head>
<body onload="onLoad()">
<button onclick="capturePhoto();">写真を撮影</button> <br>
<button onclick="capturePhotoEdit();">写真を撮影して編集</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">フォトライブラリから取得</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">フォトアルバムから取得</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
cameraSuccess
撮影に成功した場合に呼び出されるコールバック関数です。
function(imageData) {
// 任意のコード
}
パラメータ
- imageData: Base64 によるイメージエンコーディング、またはイメージファイルの URI (cameraOptionsで設定)
使用例
// 画像を表示
//
function cameraCallback(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
cameraError
エラーが発生した場合に呼び出されるコールバック関数です。
function(message) {
// エラーメッセージを表示
}
パラメータ
-
message: デバイスのネイティブコードによって与えられたメッセージを表します (
String
)
cameraOptions
カメラの設定オプションのためのパラメータを表します。
{ quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true };
オプションの内容
quality: イメージの画質を指定します。範囲:0から100 (
Number
)-
destinationType: navigator.camera.DestinationTypeで定義された返り値のフォーマットを指定します (
Number
)Camera.DestinationType = { DATA_URL : 0, // 画像をBase64形式で取得 FILE_URI : 1 // ファイルURIとして取得 };
-
sourceType: navigator.camera.PictureSourceType で定義された取得ソースを指定します (
Number
)Camera.PictureSourceType = { PHOTOLIBRARY : 0, // フォトライブラリ CAMERA : 1, // カメラ SAVEDPHOTOALBUM : 2 // フォトアルバム };
allowEdit: イメージの簡単な編集を許可します (
Boolean
)
Androidに関する注意点
-
allowEdit
パラメータは無視されます - Camera.PictureSourceType.PHOTOLIBRARY と Camera.PictureSourceType.SAVEDPHOTOALBUM は同じフォトアルバムを表示します。
BlackBerryに関する注意点
-
quality
パラメータは無視されます -
sourceType
パラメータは無視されます -
allowEdit
パラメータは無視されます - 撮影アプリを閉じるためには、アプリケーションにキー入力許可の権限が付与されている必要があります。
- 大きなサイズで撮影を行った場合、高画質カメラを搭載したデバイスでエンコードすることができない場合があります (例: Torch 9800)。
Palmに関する注意点
-
quality
パラメータは無視されます -
sourceType
パラメータは無視されます -
allowEdit
パラメータは無視されます
iPhoneに関する注意点
- メモリエラーを防ぐには、
quality
パラメータを50以下に設定してください。 -
destinationType.FILE_URI
が使用された場合、撮られた写真や編集された写真は アプリケーションの Documents/tmp ディレクトリに保存されます。 -
アプリケーションの Documents/tmp ディレクトリはアプリ終了とともに消去されます。 もしストレージの空きが少ない場合、このディレクトリは navigator.fileMgr API をつかって消去できます。
navigator.fileMgr.deleteDirectory("tmp", onSuccess, onFail);