カメラで写真を撮って、その写真をサーバーにアップロードします。
iOS/Androidともに動作しました。
base64encodeされた画像データをAJAXでサーバーにPOSTして、サーバーではPHPでbase64decodeしています。
※エラー処理などはほとんど省いています。
HTML
最低限の要素だけ。カメラ起動ボタン、画像入れるとこ、アップロードボタン、プログレスバー
|
1 2 3 4 5 6 7 8 9 10 11 |
<body style="text-align:center;"> <button onclick="camera()">カメラ起動</button> <hr> <div class="image">画像はありません。</div> <hr> <button onclick="upload()">アップロード</button> <hr> <div class="progress"><div class="bar" style="background:green;width:0px;">0%</div></div> </body> |
javaScript
jQueryを使っているので読み込む必要があります。
（設定 > JS/CSSコンポーネント からjQueryを追加）
ちなみに、☆の部分をアンコメントするとライブラリからの写真選択になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<script> // 撮影した画像データを入れる変数 var image = ''; // 撮影 function camera(){ // カメラ起動 navigator.camera.getPicture (onSuccess, onFail, { quality: 90, // 画質 destinationType: Camera.DestinationType.DATA_URL, // base64encodeされた値で取得 sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY, //☆これを入れるとライブラリから選択になる targetWidth:500, // 取得する画像の横幅 targetHeight:500, // 取得する画像の高さ allowEdit: true, // 正方形にトリミングするかどうか encodingType: 'JPEG', // 形式（JPEG or PNG） correctOrientation: true, // 撮影時と同じ向きに写真を回転 saveToPhotoAlbum: false, // 撮影後、端末のアルバムに画像を保存 }); // 成功した際に呼ばれるコールバック関数 function onSuccess (imageData) { // 写真データがあれば挿入 if(typeof(imageData) != 'undefined' && imageData != '') { // データ保持 image = imageData; // 挿入 $('.image').html('<img src="data:image/jpeg;base64,' + imageData + '" width="200">'); } } // 失敗した場合に呼ばれるコールバック関数 function onFail (message) { alert('キャンセルしました。'); } } // アップロード function upload(){ if(image != '') { $.ajax({ type: 'post', url: "http://sample.com/upload.php", //★URLは適宜変更 data: { image_data: image, // 画像データ指定 }, dataType: 'json', cache: false, async: true, xhr : function() { /* アップロード状況を表示 */ XHR = $.ajaxSettings.xhr(); if(XHR.upload) { XHR.upload.addEventListener('progress',function(e) { progre = parseInt(e.loaded/e.total*10000)/100 ; $('.progress .bar').text(Math.round(progre)+"%"); $('.progress .bar').css('width', progre+"%"); }, false); } return XHR; }, success: function(e, textStatus) { if(e.response == true) { // アラート alert('アップロードに成功しました。'); } else { alert('アップロードに失敗しました。'); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('error...'); }, }); } else { alert('撮影されていません。'); } } </script> |
サーバーで画像を保存
とりあえず保存だけ。事前にユーザーIDとか持たせて、DBに保存しないとヒモ付できない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php //upload.php $results = array( 'response' => false, 'data' => array(), 'errors' => '', ); // 画像があれば if($_POST['image_data']) { // ファイル名と保存場所の設定 $file_name = date('YmdHis') . '.jpg'; //★適宜変更 $file_path = 'upload_test/' . $file_name; //★適宜変更 // 画像をサーバーに作成 if(file_put_contents($file_path, base64_decode($_POST['image_data'])) !== false) { $results['response'] = true; $results['data'] = $file_path; } } // jsonで出力 header("Content-Type: text/javascript; charset=utf-8"); echo json_encode($results); die; |
