Geek asks and answers

Automatically upload a photo to Phonegap after shooting with a camera

Using the PhoneGap API for the camera and file, I try to make it so that when I take a photo in a specific application, it is automatically uploaded to the server that I use.

I copied both APIs into my index.html file, and the only thing I changed was to add another javascript imageInfo variable, which is set to ImageData in the block for onPhotoDataSuccess. This imageInfo is then set as the uploadPhoto parameter when I call it.

The only thing I changed is to put the line: navigator.camera.DestinationType(1);so that the output will be imageURIthat accepts uploadPhoto.

My only HTML code:

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

But for some reason it does not work. Any advice or flaws you see in my reasoning?

Thank!

+3
source share
3 answers

Since the camera is event driven, you cannot just bind events and hope for the best ... In the callback of the successcode that uses the image, you must call , then the code to load the image.

EDIT

Here I use the URI returned when the image was successfully drawn. But it should be pretty simple.

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;
}
+2
source

Take a look at the FileTransfer API so you can directly upload the image to your file server. (Assuming you are using the latest phone book)

This is exactly what you want. Source code taken from Phonegap documentation:

// 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);
  }
+4
source

It looks like you can use camera.getPicture(...)from PhoneGap API. This will launch the default camera application, allow the user to take a picture, and when they are completed, he will return either data for the base64 encoded string or give you the image file uri. Then you can use this to upload to the server. You can learn more about camera.getPicturethe documentation found here. It looks pretty straight from this article.

I never used PhoneGap, and found it in 2 minutes.

-1
source

More articles:


All Articles