Home/ Questions/Q 8912529
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T04:13:25+00:00

I need to develop mobile apps using jquery mobile and Phonegap to capture image

  • 0

I need to develop mobile apps using jquery mobile and Phonegap
to capture image from camera and then upload it to REST web service,
using WCF (.NET) or JAX-RS (Jersey), is this can be done ?

if yes, is there any sample/tutorial to do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By using phonegap, you can capture image from camera, please have look at the camera api.

    To upload image on server, please go through with the following code:

    <!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<link rel="stylesheet" href="style.css" media="screen" />
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
     var pictureSource; // picture source
     var destinationType; // sets the format of returned value 
     document.addEventListener("deviceready", onDeviceReady, false);
     function onDeviceReady() {
         pictureSource = navigator.camera.PictureSourceType;
         destinationType = navigator.camera.DestinationType;
     }
</script>
</head>
<body>
<script type="text/javascript" charset="utf-8">

         var myData = "";
         $(document).ready(function() {
             $("#getDataFromServer").click(function() {
                 var imageData = myData;
                 $.ajax({
                     type : "POST",

                     url : 'http://my.domain.name/saveImage.ashx',

                     data : {
                         image : imageData
                     },

                     beforeSend : function() {

                         $("#comment2").text("Start ajax " + imageData.length);
                     },

                     success : function(data) {

                         $("#comment2").text("Uploaded! " + data);
                     },

                     error : function(request, error) {

                         $("#comment2").text("Error! " + error);
                     }
                 });
             });
         })

         function capturePhotoEdit(source) {

             navigator.camera.getPicture(onPhotoDataSuccess, onFail, {

                 quality : 50,

                 destinationType : destinationType.DATA_URL,

                 sourceType : source
             });
         }

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

         function onPhotoDataSuccess(imageData) {

             console.log(imageData);

             var smallImage = document.getElementById('smallImage');

             smallImage.style.display = 'block';

             smallImage.src = "data:image/jpeg;base64," + imageData;

             myData = imageData;

             $("#comment").text(imageData.length);
         }
     </script>
     <h1>Hello World</h1>
     <p>
         <a href="#" onclick="capturePhotoEdit(pictureSource.PHOTOLIBRARY);">get
             image</a>
     </p>
     <p>
         <a href="#" id="getDataFromServer">send image</a>
     </p>
     <span id="comment2"></span>
     <img style="display: none; width: 100px; height: 100px;"
         id="smallImage" src="" />
     <span id="imagename"></span>
     <span id="comment"></span>
</body>
</html>
    • 0