3

我需要使用 jquery mobile 和 Phonegap 开发移动应用程序以从相机捕获图像，然后使用WCF (.NET)或JAX-RS (Jersey)将其上传到 REST Web 服务，这可以做到吗？

如果是，是否有任何示例/教程可以做到这一点？

4

1 回答 1

1

通过使用phonegap，您可以从相机中捕获图像，请查看相机api。

要在服务器上上传图片，请使用以下代码：

<!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>
于 2012-11-22T07:33:12.573 回答