今回は、PhoneGapを利用してカメラアプリを起動し画像を取得する、またはギャラリー等から画像を取得するサンプルを紹介します。
まずはシグニチャから
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
cameraOptions
quality
画質を設定します。
設定値 | 0から100 |
destinationType
取得するフォーマットを選択します。
Camera.Picture.DestinationType.DATA_URL | デフォルト値。取得した画像のBase64形式の文字列 |
Camera.Picture.DestinationType.FILE_URI | 取得した画像のURI |
sourceType
画像の取得方法を選択します。
Camera.PictureSourceType.PHOTOLIBRARY | コンテンツを選択するアプリ一覧ダイアログが表示され選択したアプリから、コンテンツを選択して取得。選択できるコンテンツは、mediaTypeで指定できます。 |
Camera.PictureSourceType.CAMERA | デフォルト値。カメラから画像を取得 |
Camera.PictureSourceType.SAVEDPHOTOALBUM | Camera.PictureSourceType.PHOTOLIBRARYと同じ |
Androidでは、[PHOTOLIBRARY]と[SAVEDPHOTOALBUM]は同じくギャラリーから取得する処理となります。
mediaType
sourceTypeで、[PHOTOLIBRARY]または[SAVEDPHOTOALBUM]を選択したときのみ有効です。
Camera.MediaType.PICTURE | デフォルト値。画像の中から選択します。取得方法は destinationType に指定したものとなります。 |
Camera.MediaType.VIDEO | 動画の中から選択します。取得方法は FILE_URI となります。 |
Camera.MediaType.ALLMEDIA | すべてのコンテンツから選択します。 |
cameraOptionは以上です。API Referenceにある他のoptionは、Androidでは利用しません。
cameraSuccess
取得した画像(または選択したコンテンツ)のデータが引数として渡されますので、データの処理を記述します。
function(imageData){ // ここに処理を記述 }
imageData | cameraOptionsのdestinationTypeで選択したフォーマットのデータ |
---|
cameraError
画像(またはコンテンツ)が取得できなかった場合に実行されます。メッセージが引数として渡されますので、メッセージの表示や代替の処理を記述します。
function(message){ // ここに処理を記述 }
message | コンテンツが取得できなかった旨のメッセージ |
---|
とりあえずサンプルソース
<!DOCTYPE HTML><html> <head> <title>PhoneGap Showcase</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" type="text/css" media="all"> <link rel="stylesheet" href="jquery.mobile.structure-1.0.min.css" type="text/css" media="all"> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Camera Showcase</h1> </div> <div data-role="content"> <a id="camera_base64" href="#" data-role="button">Camera(Base64)</a> <a id="camera_uri" href="#" data-role="button">Camera(URI)</a> <a id="camera_library" href="#" data-role="button">Photo Library</a> <img style="display:none;width:100%" id="camera_pic" src="" /> </div> </div> </body> <script type="text/javascript" charset="utf-8" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> <script type="text/javascript"> $(function(){ document.addEventListener("deviceready", function(){ $('#camera_base64').attr('href', 'javascript:getCameraBase64()'); $('#camera_uri').attr('href', 'javascript:getCameraURI()'); $('#camera_library').attr('href', 'javascript:getPhotoURI()'); }, false); }) // カメラから画像を取得して、Base64形式で取得する function getCameraBase64(){ navigator.camera.getPicture( function(imageData){ // cameraSuccess $('#camera_pic') .css('display', 'block') .attr('src', 'data:image/jpeg;base64,' + imageData); }, function(message){ // cameraError alert(message); }, { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, }); }; // カメラから画像を取得して、保存された画像のURIを取得する function getCameraURI(){ navigator.camera.getPicture( function(imageURI){ // cameraSuccess $('#camera_pic') .css('display', 'block') .attr('src', imageURI); }, function(message){ // cameraError alert(message); }, { quality : 75, destinationType : Camera.DestinationType.FILE_URI, sourceType : Camera.PictureSourceType.CAMERA, }); }; // ギャラリーなどから選択した画像のURIを取得する function getPhotoURI(){ navigator.camera.getPicture( function(imageURI){ // cameraSuccess $('#camera_pic') .css('display', 'block') .attr('src', imageURI); }, function(message){ // cameraError alert(message); }, { quality : 75, destinationType : Camera.DestinationType.FILE_URI, sourceType : Camera.PictureSourceType.PHOTOLIBRARY, }); }; </script> </html>
カメラで撮った画像のBase64形式の文字列を取得する
この方法で画像を取得すると、ファイルとして画像を残さずに取得することができます。プレビュー的な画像の保持や、即Webサービスに投稿する場合などに利用すると良いでしょう。以下のコードでは、引数として受け取ったBase64形式の文字列を、srcタグに直接設定して画面に表示しています。
// カメラから画像を取得して、Base64形式で取得する function getCameraBase64(){ navigator.camera.getPicture( function(imageData){ // cameraSuccess $('#camera_pic') .css('display', 'block') .attr('src', 'data:image/jpeg;base64,' + imageData); // 引数で渡されたBase64形式の画像を表示 }, function(message){ // cameraError alert(message); // コンテンツを取得できなかった場合のメッセージを表示 }, { quality : 75, destinationType : Camera.DestinationType.DATA_URL, //取得した画像をBase64形式の文字列で取得する sourceType : Camera.PictureSourceType.CAMERA, // 画像はカメラから取得する }); };
カメラで撮った画像のURIを取得する
この方法で画像を取得すると、選択したカメラアプリのディレクトリに画像が保存されます。cameraSuccessでは、保存されたファイルのURIを引数として受け取ります。以下のコードでは、URIをsrcタグに設定し画像を表示しています。
// カメラから画像を取得して、保存された画像のURIを取得する function getCameraURI(){ navigator.camera.getPicture( function(imageURI){ // cameraSuccess $('#camera_pic') .css('display', 'block') .attr('src', imageURI); // 取得した画像のURIを指定して画像を表示 }, function(message){ // cameraError alert(message); // コンテンツを取得できなかった場合のメッセージを表示 }, { quality : 75, destinationType : Camera.DestinationType.FILE_URI, //取得した画像のURIを取得する sourceType : Camera.PictureSourceType.CAMERA, // 画像はカメラから取得する }); };
ギャラリーにある画像のURIを取得する
既に撮影済みの画像を選択して画面に表示しています。
コンテンツを選択するアプリを選択するダイアログが表示されます。
// ギャラリーなどから選択した画像のURIを取得する function getPhotoURI(){ navigator.camera.getPicture( function(imageURI){ // cameraSuccess $('#camera_pic') .css('display', 'block') .attr('src', imageURI); // 取得した画像のURIを指定して画像を表示 }, function(message){ // cameraError alert(message); // コンテンツを取得できなかった場合のメッセージを表示 }, { quality : 75, destinationType : Camera.DestinationType.FILE_URI, //選択した画像のURIを取得する sourceType : Camera.PictureSourceType.PHOTOLIBRARY, //コンテンツを選択して取得 }); };