Symfoware

Symfowareについての考察blog

Cordova カメラを起動し、撮影内容をサーバーにアップロードする

Cordovaでカメラを起動する方法はここで学びました。
Cordova(コルドバ)チュートリアル14 カメラAPIの利用

チュートリアルを流しただけなので、もう少し詳しく見てみます。



カメラプラグインのインストール



カメラを使用するには、まずプラグインをインストールします。


$ cordova plugin add org.apache.cordova.camera



これで準備完了です。





カメラ起動のサンプルソース



カメラプラグインの詳細はこちら。
apache/cordova-plugin-camera


簡単のため、index.html全てに処理を記載してみました。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="format-detection" content="telephone=no" />
  6.     <meta name="msapplication-tap-highlight" content="no" />
  7.     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  8. </head>
  9. <body>
  10. <div>
  11.     <h1>Cameraサンプル</h1>
  12.     <div>
  13.         <button id="camera">カメラ起動</button>
  14.     </div>
  15.     <div>
  16.         <img id="image" width="200">
  17.     </div>
  18. </div>
  19. <script type="text/javascript" src="cordova.js"></script>
  20. <script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
  21. <script type="text/javascript">
  22. $(function() {
  23.     $('#camera').on('click', function() {
  24.         
  25.         // カメラのチェク
  26.         if (!navigator.camera) {
  27.             alert("Camera API not supported", "Error");
  28.             return;
  29.         }
  30.         
  31.         // カメラ起動時のオプション
  32.         var options = {
  33.             quality: 50,
  34.             destinationType: Camera.DestinationType.DATA_URL,
  35.             sourceType: 1,     // 0:Photo Library, 1=Camera, 2=Saved Album
  36.             encodingType: 0     // 0=JPG 1=PNG
  37.         };
  38.         
  39.         // カメラを起動
  40.         navigator.camera.getPicture(
  41.             function(imgData) {
  42.                 $('#image').attr('src', "data:image/jpeg;base64,"+imgData);
  43.             },
  44.             function() {
  45.                 alert('Error taking picture', 'Error');
  46.             },
  47.             options
  48.         );
  49.         
  50.     });
  51. });
  52. </script>
  53. </body>
  54. </html>



Camera.DestinationType.DATA_URLというオプションを指定すると、
撮影内容がBase64エンコードされた状態で取得できます。
これをそのままimgに表示しています。

エミュレーターで実行してみます。

カメラ起動をクリック。

569_01.png


適当に撮影。

569_02.png


結果が表示されました。
左に90度傾いた状態で画像が取得できるようです。

569_03.png




オプション



指定できるオプションは以下のとおり。


quality : 75
destinationType : Camera.DestinationType.DATA_URL
sourceType : Camera.PictureSourceType.CAMERA
allowEdit : true
encodingType: Camera.EncodingType.JPEG
targetWidth: 100
targetHeight: 100
popoverOptions: CameraPopoverOptions
saveToPhotoAlbum: false




・quality

0から100の間で画質を指定します。


・destinationType

画像の形式です

Camera.DestinationType.DATA_URL : 0
Base64

Camera.DestinationType.FILE_URI : 1
ファイルのURI

Camera.DestinationType.NATIVE_URI : 2
ファイルのネイティブURI

FILE_URIとNATIVE_URIの差がわからなかったのでテストしてみます。

FILE_URI

569_04.png

NATIVE_URI

569_05.png

Androidだと一緒になるのかな?



・sourceType

画像の取得元です

Camera.PictureSourceType.PHOTOLIBRARY : 0
ローカルのライブラリから

Camera.PictureSourceType.CAMERA : 1
カメラから

Camera.PictureSourceType.SAVEDPHOTOALBUM : 2
撮影済の写真から


・allowEdit

写真の編集を有効にするか


・encodingType

画像のタイプ

Camera.EncodingType.JPEG : 0
jpeg形式

Camera.EncodingType.PNG : 1
png形式


・targetWidth
・targetHeight

取得する画像の縮尺率?


・correctOrientation
デバイスの向きにより回転するか

・saveToPhotoAlbum
ローカルのアルバムに保存するか


・cameraDirection

前後どちらのカメラを使用するか

Camera.Direction.BACK : 0
後ろ

Camera.Direction.FRONT : 1







ファイルのアップロード



ファイルのアップロードはfile-transferプラグインを使うと良さそうです。
apache/cordova-plugin-file-transfer

プラグインをインストールします。


$ cordova plugin add org.apache.cordova.file-transfer




カメラを起動し、撮影した写真をサーバーにアップロードするサンプルです。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="format-detection" content="telephone=no" />
  6.     <meta name="msapplication-tap-highlight" content="no" />
  7.     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  8. </head>
  9. <body>
  10. <div>
  11.     <h1>Cameraサンプル</h1>
  12.     <div>
  13.         <button id="camera">カメラ起動</button>
  14.     </div>
  15. </div>
  16. <script type="text/javascript" src="cordova.js"></script>
  17. <script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
  18. <script type="text/javascript">
  19. $(function() {
  20.     
  21.     var win = function () {
  22.         alert('ok');
  23.     };
  24.     
  25.     var fail = function (error) {
  26.         alert('error!' + error.code + '\n' + error.source + '\n' + error.target);
  27.     };
  28.     
  29.     
  30.     $('#camera').on('click', function() {
  31.         
  32.         // カメラのチェク
  33.         if (!navigator.camera) {
  34.             alert("Camera API not supported", "Error");
  35.             return;
  36.         }
  37.         
  38.         // カメラ起動時のオプション
  39.         var options = {
  40.             quality: 50,
  41.             destinationType: Camera.DestinationType.FILE_URI,
  42.             sourceType: 1,     // 0:Photo Library, 1=Camera, 2=Saved Album
  43.             encodingType: 0     // 0=JPG 1=PNG
  44.         };
  45.         
  46.         // カメラを起動
  47.         navigator.camera.getPicture(
  48.             function(fileURL) {
  49.                 var ft = new FileTransfer();
  50.                 ft.upload(fileURL, encodeURI("http://192.168.1.101/upload.php"), win, fail);
  51.             },
  52.             function() {
  53.                 alert('Error taking picture', 'Error');
  54.             },
  55.             options
  56.         );
  57.         
  58.     });
  59. });
  60. </script>
  61. </body>
  62. </html>




サーバーの受け取り側のプログラムはこんな感じになりました。


  1. <?php
  2. if (!is_uploaded_file($_FILES["file"]["tmp_name"])) {
  3.     return;
  4. }
  5. // お試しなので、カレントに移動
  6. move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES["file"]["name"]);




ポイントは、"file"(デフォルト)という名前でポストされてくる点です。
名前を変更したい場合は、「fileKey」といオプションを指定します。


アプリケーション起動

569_06.png


撮影

569_07.png


アップロードOK

569_08.png


サーバー側には、こんんがファイルがアップロードされていました。

569_09.png


端末に保存されているファイルをアップロードしたい場合は、
sourceTypeオプションを0とかにすれば良さそうです。

569_10.png


ダウンロードしておいた写真のアップロードが行えました。

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/25(水) 23:33:58|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Windows Androidエミュレーター起動で「x86 emulation currently requires hardware acceleration!」 | ホーム | jQueryのajax通信で「No 'Access-Control-Allow-Origin' header」>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1657-435aca59
この記事にトラックバックする(FC2ブログユーザー)