Question

使用PhoneGap的相机和文件API我试图让它在某个应用程序中拍照时自动上传到我正在使用的服务器。

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

我改变的唯一另一件事就是放行：navigator.camera.DestinationType(1);以使输出为imageURI，这是uploadPhoto所采用的。

HTML中唯一的代码是：

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

但由于某种原因，它无法正常工作。你在我的推理中看到的任何提示或缺陷？

谢谢！

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

Answer 2

由于相机是事件驱动的，你不能只是将事件链接起来并希望最好......在图片拍摄代码的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;
}

Answer 3

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

我从未使用PhoneGap，我在2分钟内发现了这一点。

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

3 个答案:

修改