Search code examples
imagecordovawcfcameraphonegap

Cordova/phonegap: Take a photo and send it to my server


at the moment, in my app, I have a screen where the user click on "send" and send some data to ther server (a wcf service).

Now, I'd like to add a feature: in addition to the actual sent data, the user has to take a photo and send it with the other parameters.

I have added the plugin (camera) and create the template.

function capturePhoto() {
    alert("1");
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
        quality: 50,
        destinationType: navigator.camera.DestinationType.FILE_URI,
        //destinationType: navigator.camera.DestinationType.NATIVE_URI,
        //sourceType: sourceType.CAMERA
    });
}

function onPhotoDataSuccess(imageData) {
    alert("S");
    var smallImage = document.getElementById('myImage');
    smallImage.style.display = 'block';
    smallImage.src = "data:image/jpeg;base64," + imageData;
    image = "data:image/jpeg;base64," + imageData;
    alert("Image = " + image);
}

function onFail(message) {
    alert('Failed because: ' + message);
}

I'm sure I have to manage something in the onSuccess function, but how can I reach my goal? After the picture is taken, I have to send it adding the picture as parameters here:

$.ajax({
    type: "POST",
    contentType: "application/json",
    dataType: "json",
    url: url,
    data: JSON.stringify({ "data": date_str, "PICTUREHERE":pictureHere }),
    success: function (output) {
          //my stuff
            },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
          //my error stuff

     }
 });

My deviceReady function is:

$(document).on("deviceready", function () {
    navigator.splashscreen.hide();
});

I think in server side the "pictureHere" parameter has to be a byte[], but I don't know how to manage the app side.

UPDATE: my config.xml

<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
  <name>ApplicationTemplate</name>
  <description>Template</description>
  <author email="info@info.com" href="http://www.info.com/">info</author>
  <preference name="permissions" value="none" />
  <preference name="prerendered-icon" value="true" />
  <preference name="android-windowSoftInputMode" value="adjustPan" />
  <!--<preference name="phonegap-version" value="cli-7.0.1" />-->

  <!--<preference name="SplashScreen" value="splash" />-->
  <preference name="SplashScreenDelay" value="60000" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false" />
  <preference name="ShowSplashScreenSpinner" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="android-minSdkVersion" value="14" />
  <preference name="android-targetSdkVersion" value="22" />
  <!--<plugin name="cordova-plugin-file" />-->
  <!--<plugin name="cordova-plugin-camera" />-->
  <plugin name="cordova-plugin-camera" spec="^2.4.1">
    <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
    <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
  </plugin>
  <plugin name="cordova-plugin-splashscreen" onload="true" />
  <plugin name="cordova-plugin-whitelist" />
  <plugin name="cordova-plugin-ios-longpress-fix" />
  <plugin name="cordova-plugin-statusbar" onload="true" />
  <access origin="*" />
</widget>

In my html page I added

<img id="myImage" />

Solution

  • function getImage() {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(function(pictureHere){
        $.ajax({
          type: "POST",
          contentType: "application/json",
          dataType: "json",
          url: url,
          data: JSON.stringify({ "data": date_str, "PICTUREHERE":pictureHere}),
          success: function (output) {
            //my stuff
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            //my error stuff
          }
          });
        }, function (message) {
          Alert("Error", "error");
        }, {
          quality: 50,
          destinationType: navigator.camera.DestinationType.FILE_URI,
          sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
        }
      );
    }
    

    pictureHere has to be base64 string