読者です 読者をやめる 読者になる 読者になる

PhoneGapできる!! カメラから画像を取得するサンプルを紹介します。

今回は、PhoneGapを利用してカメラアプリを起動し画像を取得する、またはギャラリー等から画像を取得するサンプルを紹介します。

まずはシグニチャから

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

参考:PhoneGap API Documentation

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タグに直接設定して画面に表示しています。

https://lh5.googleusercontent.com/-Ukle3DvR2GY/Tu8gNquH7oI/AAAAAAAALA4/S4Yuu8BB568/s800/camera_base64.jpg

// カメラから画像を取得して、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タグに設定し画像を表示しています。

https://lh3.googleusercontent.com/-HcojagO9mFU/Tu8gOJVjWrI/AAAAAAAALA8/nRmKZSOI8wU/s800/camera_uri.jpg

ファイルとして保存されています。
https://lh6.googleusercontent.com/-pvR1vgSKKA4/Tu8gOom81JI/AAAAAAAALBA/whnQgdPm7ZI/s800/camera_uri_folder.jpg

// カメラから画像を取得して、保存された画像の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を取得する

既に撮影済みの画像を選択して画面に表示しています。
コンテンツを選択するアプリを選択するダイアログが表示されます。
https://lh6.googleusercontent.com/-a0MLicgwi7c/Tu8gPQEBR3I/AAAAAAAALBE/Y5GkMDKnTiM/s800/photo_lib_select.jpg


選択します。
https://lh4.googleusercontent.com/-ILWFImZWsLU/Tu8gQgCO_yI/AAAAAAAALBM/V6_iVZ4ZpPg/s800/photo_lib_choice.jpg

表示されます(゚∀゚)
https://lh6.googleusercontent.com/-67at2_BEezQ/Tu8gQJZWXfI/AAAAAAAALBI/A8o6eGsatjc/s800/photo_lib_display.jpg

// ギャラリーなどから選択した画像の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, //コンテンツを選択して取得
        });
};

まとめ

カメラを利用して画像を取得することができると、いかにもAndroidアプリを作っている感があって創作意欲が湧いてきませんか?他のカメラアプリと連携して画像を取得するあたりもAndroidOSらしいところでもあります。
今回は、撮影して一時的に取得した画像、撮影してファイルとして保存した画像、既にファイルとして保存されている画像についてサンプルを紹介しました。アプリのカメラデバイスの利用シーンとしては、紹介した3パターンあればおおよそ間に合うので、ぜひカメラデバイスを利用したアプリ開発に挑戦してみてください。