在使用Phonegap相机拍照后自动上传照片

Question

使用PhoneGap的相机和文件API，我正在尝试使特定应用程序中拍摄的照片自动上传到我使用的服务器。

我已将这两个API复制到我的index.html文件中，唯一修改的是添加另一个JavaScript变量imageInfo，该变量在onPhotoDataSuccess块中设置为ImageData。然后，当我调用uploadPhoto时，将此imageInfo设置为参数。

我改变的另一件事是添加了以下行：navigator.camera.DestinationType(1); 以便输出为imageURI，这是uploadPhoto所需的内容。

我的HTML中唯一的代码是：

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

但出于某种原因它并没有起作用。你看到我的推理中有什么提示或缺陷吗？

谢谢！

- clifgray

---

也许您可以再清楚一些。您是在说您想要上传由其他应用程序拍摄的照片，而不是您自己的应用程序拍摄的照片吗？ - mtmurdock

我希望用户拍照后，应用程序能够自动上传照片。 - clifgray

没错，但这并没有回答我的问题：是你的应用程序拍照，还是另一个应用程序拍照？ - mtmurdock

我通过PhoneGap API将拍照委托给相机，但是实际上是我的应用程序进行了委派。 - clifgray

@clifgray 在 camera.getPicture() 的成功回调中，您应该调用 FileTransfer.upload() 代码。您需要更多地考虑异步操作。 - Simon MacDonald

Answer 1

请查看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);
  }

- Futur

---

是的，那就是我说的，我正在使用它，只是想知道在哪里调用FileTransfer.upload()。 - clifgray

Answer 2

由于Camera是事件驱动的，你不能仅仅链式调用事件并期望一切顺利... 在拍照代码的success回调中，你需要调用then代码来上传照片。

编辑

在这里，我使用成功返回的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;
}

- dda

---

成功回调的代码示例？ - Paul

Answer 3

看起来你可以使用 PhoneGap API 中的 camera.getPicture(...)。这将启动默认相机应用程序，让用户拍照，并在完成后返回数据作为 base64 编码字符串，或者它会给你图像文件的 URI。然后，你应该能够使用它上传到服务器。你可以在 这里 找到更多关于 camera.getPicture 的文档。从那篇文章中看起来很简单。

我从未使用过 PhoneGap，但我在 2 分钟内找到了这个。

- mtmurdock

---

是的，我清楚地意识到了，并且说过我在我的代码中确切地使用了那个API。但是camera.getPicture没有任何上传功能。我想知道如何有效地将图像URI放入File API代码中以上传它。 - clifgray

很抱歉，您上面的代码示例中写着 button onclick="capturePhoto(); uploadPhoto(imageData);">Capture Photo 而不是 camera.getPicture()。我猜我并不明白您实际上的问题是什么。您是在问如何拍照还是如何上传照片？这两个任务是完全独立的，您不会找到一个神奇的API可以同时完成这两个任务。 - mtmurdock

问题是如何在拍照后上传照片。 - Futur