用相机拍照后自动上传Phonegap中的照片

Question

我正在尝试使用 PhoneGap 的相机和文件 API，以便当我在某个应用中拍照时，它会自动上传到我正在使用的服务器。

我已将这两个 API 复制到我的 index.html 文件中，我唯一更改的是在 onPhotoDataSuccess 块中添加另一个设置为等于 ImageData 的 javascript 变量 imageInfo。然后这个imageInfo在我调用它的时候被设置为uploadPhoto的参数。

我唯一更改的另一件事是添加以下行：navigator.camera.DestinationType(1);，以便输出是 imageURI，这是 uploadPhoto 所采用的。

我唯一的 HTML 代码是：

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

但由于某种原因，它不起作用。您在我的推理中看到任何提示或缺陷？

谢谢！

Answer 1

既然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;
}

Answer 2

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

Answer 3

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

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