PhoneGapでカメラ撮影＆サーバーにアップロード

カメラで撮影し、写真をサーバーにアップロードしてみます。

（パーソナル）クラウドとの連携みたいなもん。

PhoneGapのCameraを使ってみます。

表示サンプルとコード

[写真を撮影]のボタンをタップすると、内蔵カメラが起動します。そのままシャッターを押すと撮影完了後、元の画面に復帰します。

写真のURI（カメラ内の保存場所）とサムネイルを表示。

URIは、’content://media/external/images/media/xx’という文字列です。

このままでは、アップロード用に使えないので、フルパスに変換します。[URLをフルパスに変換]ボタンをタップ。

’/mnt/sdcard/DCIM/Camera/xxxxxx.jpg’が写真データのパスです。’/mnt’はマウントを意味しているだけなので、実際の使用時にはこれは省いておきます。

以下のソースは、PhoheGap fanのページを参考にしました。一部修正しています。
ファイルのアップロード用にコードを追加しています。
サーバーにバイナリ（画像）をアップロードするコードはこのページ(PhoneGapでファイルをサーバーにアップロード)をごらんください（^^）。

【index.html】

<!DOCTYPE HTML>
<html>
<head>
<title>AAA</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">     
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.0.js"></script>

<script type="text/javascript" charset="utf-8">
    var pictureSource;   // 写真ソース 
        var destinationType; // 戻り値のフォーマット 
    
    
    document.addEventListener("deviceready",onDeviceReady,false); 

    function onDeviceReady() { 
        pictureSource=navigator.camera.PictureSourceType; 
        destinationType=navigator.camera.DestinationType; 
    } 
    
    //*********************************
    // 撮影
    function capturePhoto() { 
        // 撮影した写真をBase64形式の文字列として取得 
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); 
    } 
    
    // 
    function onPhotoDataSuccess(imageData) { 
    　　    document.getElementById("content_uri").value = imageData;
        var smallImage = document.getElementById('smallImage'); 
        
        smallImage.style.display = 'block'; 
        smallImage.src = imageData; 
    } 
    //*********************************
    function win_uri2path(FileEntry){
        document.getElementById("full_path").value = FileEntry.fullPath;
    }
    function fail_uri2path(evt){
        alert("error:" + evt.code);
    }
    function uri2path(){
        var c_uri = document.getElementById("content_uri").value;
        window.resolveLocalFileSystemURI(c_uri, win_uri2path, fail_uri2path);
    }
    
    
    //*********************************
    function getPhoto(source) { 
        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,destinationType: destinationType.FILE_URI,sourceType: source }); 
    } 
    
    function onPhotoURISuccess(imageURI) { 
  　　 document.getElementById("content_uri").value = imageURI;
        
        var largeImage = document.getElementById('largeImage'); 
   
          largeImage.style.display = 'block'; 
          largeImage.src = imageURI; 
        } 
    
    
    
    //*********************************
    function onFail(mesage) { 
          alert('エラーが発生しました: ' + message); 
    } 
    
</script>

</head>
<body>
<button onclick="capturePhoto();">写真を撮影</button> <br> 
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">フォトライブラリから取得</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">フォトアルバムから取得</button><br>

<table><tr>
    <th>content URI:</th>
    <th><textarea rows=2 id="content_uri" value=""></textarea></th>
</tr></table>

<button onclick="uri2path();">URIをフルパスに変換</button> <br>

<table><tr>
    <th>&nbsp;&nbsp;&nbsp;full Path:</th>
    <th><textarea rows=2 id="full_path" value=""></textarea></th>
</tr></table>

<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>

TOP