2011-11-10 40 views
0

在我的iPhone phonegap应用程序中,我想使用设备的摄像头捕获图像。我已经完成了以下代码,但它不起作用。无法捕获图像。 在下面的HTML代码部分,我有一个按钮,当它点击时,我会调用java脚本定义的方法。使用javascript的iPhone手机差距应用程序

<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script> 
    <script type="text/javascript" charset="utf-8"> 

     var pictureSource; // picture source 
     var destinationType; // sets the format of returned value 

     // Wait for PhoneGap to connect with the device 
     function onLoad() { 
      document.addEventListener("deviceready",onDeviceReady,false); 
     } 

     // PhoneGap is ready to be used! 
     function onDeviceReady() { 
      pictureSource=navigator.camera.PictureSourceType; 
      destinationType=navigator.camera.DestinationType; 
     } 

     // Called when a photo is successfully retrieved (taken with camera) 
     function onPhotoDataSuccess(imageData) { 
      alert("Your photo was taken successfully.");    
     } 

     // Called when a photo is successfully retrieved (out of the device's library) 
     function onPhotoURISuccess(imageURI) { 

      // Get image handle 
      var largeImage = document.getElementById('largeImage'); 

      // Unhide image elements 
      largeImage.style.display = 'block'; 

      // Show the captured photo 
      // The inline CSS rules are used to resize the image 
      largeImage.src = imageURI; 

      var options = new FileUploadOptions(); 
      options.fileKey="file"; 
      //options.fileName="newfile.txt"; 
      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://www.yourdomain.com/upload.php", win, fail, options); 
      // Make sure you use your own site! 

     } 

     // Success reporting 
     function win(r) { 
      alert("Code = " + r.responseCode); 
      alert("Response = " + r.response); 
     } 

     // Error reporting 
     function fail(message) { 
      alert('Failed because: ' + message); 
     } 

     function capturePhoto() { 

      // Take picture using device camera and retrieve image as base64-encoded string 
      navigator.camera.getPicture(onPhotoDataSuccess, fail, { quality: 30 }); 
     } 

     function getPhoto(source) { 
      // Retrieve image file location from specified source 
      navigator.camera.getPicture(onPhotoURISuccess, fail, { 
             quality: 30, 
             destinationType: destinationType.FILE_URI, 
             sourceType: source 
             }); 
     } 

     </script> 
</head> 

<body onload="onLoad()"> 

    <button onclick="capturePhoto();">Take a Photo</button> 
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Upload a Photo</button> 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 
    <img style="display:none;" id="largeImage" src="" /> 

</body> 

回答

0

请你尝试用下面的代码片段。
它从相机捕获图像,并加载在img标签。我在设备上测试过。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <!-- Change this if you want to allow scaling --> 
    <meta name="viewport" content="width=default-width; user-scalable=no" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>PGCamera</title> 
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
    function onBodyLoad() 
    { 
     document.addEventListener("deviceready",onDeviceReady,false); 
    } 
    /* When this function is called, PhoneGap has been initialized and is ready to roll */ 
    function onDeviceReady() 
    { 
     // do your thing! 
    } 
    function PictureSourceType() {}; 
    PictureSourceType.PHOTO_LIBRARY = 0; 
    PictureSourceType.CAMERA = 1; 
    function getPicture(sourceType){ 
    var options = { quality: 10 }; 
    if (sourceType != undefined) { 
      options["sourceType"] = sourceType; 
    } 
    // if no sourceType specified, the default is CAMERA 
    navigator.camera.getPicture(getPicture_Success, null, options); 
    }; 
    function getPicture_Success(imageData){ 
     alert("getpic success"); 
     document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData; 
    } 
    </script> 
</head> 
<body onload="onBodyLoad()">  
    <img style="width:60px;height:60px" id="test_img" src="" /> 
    <!-- for testing, add the buttons below --> 
    <button onclick="getPicture()">From Camera</button> 
    <button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button> 
    </body> 
</html> 

感谢, MAYUR

相关问题