3

カメラとファイルにPhoneGapのAPIを使用して、特定のアプリで写真を撮ると、使用しているサーバーに自動的にアップロードされるようにしようとしています。

両方の API を index.html ファイルにコピーしました。変更したのは、onPhotoDataSuccess のブロックで ImageData と同じに設定された別の JavaScript 変数 imageInfo を追加することだけです。この imageInfo は、呼び出し時に uploadPhoto のパラメーターとして設定されます。

私が変更した他の唯一のことは、次の行を配置すること でしnavigator.camera.DestinationType(1);た。imageURIuploadPhoto

HTML の私の唯一のコードは次のとおりです。

button onclick="capturePhoto(); uploadPhoto(imageData);">Capture Photo</button (in brackets of course)

しかし、何らかの理由で機能していません。私の推論に何かヒントや欠陥はありますか?

ありがとう！

4

3 に答える 3

4

FileTransfer APIを見て、画像をファイル サーバーに直接アップロードできるようにします。(最新の Phonegap を使用していると仮定します)

これはまさにあなたが望むものです。Phonegap のドキュメントから取得したソース コード:

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(uploadPhoto,
  function(message) { alert('get picture failed'); },
    { quality: 50, 
      destinationType: navigator.camera.DestinationType.FILE_URI,
    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
    );
  }
  function uploadPhoto(imageURI) {
    var options = new FileUploadOptions();
    options.fileKey="file";
    options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
    options.mimeType="image/jpeg";
    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";
    options.params = params;
    var ft = new FileTransfer();
    ft.upload(imageURI, "http://some.server.com/upload.php", win, fail, options);
  }
  function win(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
  }
  function fail(error) {
    alert("An error has occurred: Code = " = error.code);
  }
于 2012-05-24T05:56:11.487 に答える
2

Camera はイベント ドリブンであるため、イベントを連鎖させて最高の結果を期待することはできません。success写真撮影コードのコールバックで、コードを呼び出して写真をアップロードする必要があります。

編集

ここでは、画像の描画に成功したときに返される URI を使用しています。しかし、それはかなり簡単なはずです。

function takePicture() {
  loadPhotoIntake();
  navigator.camera.getPicture(
    setPicture,
    function(e) {
      console.log("Error getting picture: " + e);
      document.getElementById('camera_status').innerHTML = "Error getting picture.";
    },
    { quality: 70, destinationType: navigator.camera.DestinationType.FILE_URI});
};


function setPicture(uri) {
  var c=document.getElementById('camera_image');
  var ctx = c.getContext('2d');
  var img = new Image();
  var canvasCopy = document.createElement("canvas");
  var copyContext = canvasCopy.getContext("2d");
  var maxWidth, maxHeight;
  img.onload = function(){
    // resizing code
      .....
    // draw
    ctx.drawImage(canvasCopy, 0, 0, camera_image.width, camera_image.height);
  };
  img.src = uri;
}
于 2012-05-24T00:47:28.543 に答える
-1

camera.getPicture(...)PhoneGap APIから使えるようです。これにより、デフォルトのカメラ アプリが起動し、ユーザーが写真を撮れるようになります。撮影が完了すると、データが base64 でエンコードされた文字列として返されるか、画像ファイルの uri が返されます。その後、これを使用してサーバーにアップロードできるはずです。詳細についてcamera.getPictureは、こちらのドキュメントを参照してください。その記事からはかなり簡単に思えます。

私は PhoneGap を使ったことがありませんが、2 分でこれを見つけました。

于 2012-05-23T23:55:26.777 に答える