2013-01-09 56 views
3

我有一个奇怪的问题与IOS我第一次的PhoneGap /科尔多瓦应用的PhoneGap /科尔多瓦没有显示相机

我COPY从 http://docs.phonegap.com/en/2.3.0/cordova_camera_camera.md.html#camera.getPicture

http://docs.phonegap.com/en/2.3.0/cordova_media_capture_capture.md.html#capture.captureImage

但粘贴示例当我按下任何按钮时,什么都不会发生,除非我在iPhone上双击“home”按钮。

这里是我的index.html:

<script src="assets/js/cordova.ios.js"></script> 

    <script type="text/javascript" charset="utf-8"> 
    var pictureSource; // picture source 
    var destinationType; // sets the format of returned value 

    // Wait for Cordova to connect with the device 
    document.addEventListener("deviceready", onDeviceReady, false); 

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

    // Called when a photo is successfully retrieved 
    function onPhotoDataSuccess(imageData) { 
     // Uncomment to view the base64 encoded image data 
     // console.log(imageData); 

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

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

     // Show the captured photo 
     // The inline CSS rules are used to resize the image 
     smallImage.src = "data:image/jpeg;base64," + imageData; 
    } 

    // Called when a photo is successfully retrieved 
    function onPhotoURISuccess(imageURI) { 
     // Uncomment to view the image file URI 
     // console.log(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; 
    } 

    // A button will call this function 
    function capturePhoto() { 
     // Take picture using device camera and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
      quality: 50, 
      destinationType: destinationType.DATA_URL 
     }); 
    } 

    // A button will call this function 
    function capturePhotoEdit() { 
     // Take picture using device camera, allow edit, and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
      quality: 20, allowEdit: true, 
      destinationType: destinationType.DATA_URL 
     }); 
    } 

    // A button will call this function 
    function getPhoto(source) { 
     // Retrieve image file location from specified source 
     navigator.camera.getPicture(onPhotoURISuccess, onFail, { 
      quality: 50, 
      destinationType: destinationType.FILE_URI, 
      sourceType: source 
     }); 
    } 

    // Called if something bad happens. 
    function onFail(message) { 
     alert('Failed because: ' + message); 
    } 
    </script> 
    <button onclick="capturePhoto();">Capture Photo</button> 
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> 
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button> 
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button> 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 
    <img style="display:none;" id="largeImage" src="" /> 


    <script type="text/javascript" charset="utf-8"> 

    // Called when capture operation is finished 
    function captureSuccess(mediaFiles) { 
     //var i, len; 
     //for (i = 0, len = mediaFiles.length; i < len; i += 1) { 
     // //uploadFile(mediaFiles[i]); 
     //} 
     //navigator.notification.alert('Weee', null, 'Great success!'); 
    } 

    // Called if something bad happens. 
    function captureError(error) { 
     //var msg = 'An error occurred during capture: ' + error.code; 
     //navigator.notification.alert(msg, null, 'Uh oh!'); 
    } 

    // A button will call this function 
     function captureImage() { 
     // Launch device camera application, 
     // allowing user to capture up to 2 images 
     navigator.device.capture.captureImage(captureSuccess, captureError, { limit: 2  }); 
    } 

    // Upload files to server 
    function uploadFile(mediaFile) { 
     var ft = new FileTransfer(), 
      path = mediaFile.fullPath, 
      name = mediaFile.name; 

     ft.upload(path, 
      "http://my.domain.com/upload.php", 
      function (result) { 
       console.log('Upload success: ' + result.responseCode); 
       console.log(result.bytesSent + ' bytes sent'); 
      }, 
      function (error) { 
       console.log('Error uploading file ' + path + ': ' + error.code); 
      }, 
      { fileName: name }); 
    } 
    </script> 

    <button onclick="captureImage();">Capture Image</button> 

这里是我的config.xml:

<name>yadda</name> 

    <description> 
     blabla 
    </description> 

    <author href="http://blabla.github.com" 
    email="[email protected]"> 
     BlaBla 
    </author> 

    <icon src="icon.png" gap:role="default" /> 

    <feature name="http://api.phonegap.com/1.0/geolocation"/> 
    <feature name="http://api.phonegap.com/1.0/network"/> 
    <feature name="http://api.phonegap.com/1.0/file"/> 
    <feature name="http://api.phonegap.com/1.0/camera"/> 
    <feature name="http://api.phonegap.com/1.0/media"/> 
    <feature name="http://api.phonegap.com/1.0/device"/> 

    <preference name="orientation" value="portrait" /> 
    <preference name="webviewbounce" value="false" /> 
    <preference name="prerendered-icon" value="true" /> 

    <plugin name="Capture" value="CDVCapture" /> 
    <plugin name="Camera" value="CDVCamera" /> 

没有任何人有一个想法,以我在做什么错?

回答

3

是的!我终于得到它的工作,我从PhoneGap的2.3.0降级到2.0.0

对于同样的问题,任何人在这里是我的最终代码:

的index.html

<script src="assets/js/cordova-2.0.0.js"></script> 
    <script type="text/javascript" charset="utf-8"> 

     // Called when capture operation is finished 
     // 
     function captureSuccess(mediaFiles) { 
      //var i, len; 
      //for (i = 0, len = mediaFiles.length; i < len; i += 1) { 
      // //uploadFile(mediaFiles[i]); 
      //} 
      //navigator.notification.alert('Weee', null, 'Great success!'); 
     } 

     // Called if something bad happens. 
     // 
     function captureError(error) { 
      //var msg = 'An error occurred during capture: ' + error.code; 
      //navigator.notification.alert(msg, null, 'Uh oh!'); 
     } 

     // A button will call this function 
     // 
     function captureImage() { 
      // Launch device camera application, 
      // allowing user to capture up to 2 images 
      navigator.device.capture.captureImage(captureSuccess, captureError, { limit: 2 }); 
     } 

     // Upload files to server 
     function uploadFile(mediaFile) { 
      var ft = new FileTransfer(), 
       path = mediaFile.fullPath, 
       name = mediaFile.name; 

      ft.upload(path, 
       "http://my.domain.com/upload.php", 
       function (result) { 
        console.log('Upload success: ' + result.responseCode); 
        console.log(result.bytesSent + ' bytes sent'); 
       }, 
       function (error) { 
        console.log('Error uploading file ' + path + ': ' + error.code); 
       }, 
       { fileName: name }); 
     } 
    </script> 


    <script type="text/javascript" charset="utf-8"> 

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

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

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

     // Called when a photo is successfully retrieved 
     // 
     function onPhotoDataSuccess(imageData) { 
      // Uncomment to view the base64 encoded image data 
      // console.log(imageData); 

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

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

      // Show the captured photo 
      // The inline CSS rules are used to resize the image 
      // 
      smallImage.src = "data:image/jpeg;base64," + imageData; 
     } 

     // Called when a photo is successfully retrieved 
     // 
     function onPhotoURISuccess(imageURI) { 
      // Uncomment to view the image file URI 
      // console.log(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; 
     } 

     // A button will call this function 
     // 
     function capturePhoto() { 
      // Take picture using device camera and retrieve image as base64-encoded string 
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
       quality: 50, 
       destinationType: destinationType.DATA_URL 
      }); 
     } 

     // A button will call this function 
     // 
     function capturePhotoEdit() { 
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string 
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
       quality: 20, allowEdit: true, 
       destinationType: destinationType.DATA_URL 
      }); 
     } 

     // A button will call this function 
     // 
     function getPhoto(source) { 
      // Retrieve image file location from specified source 
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { 
       quality: 50, 
       destinationType: destinationType.FILE_URI, 
       sourceType: source 
      }); 
     } 

     // Called if something bad happens. 
     // 
     function onFail(message) { 
      alert('Failed because: ' + message); 
     } 

    </script> 
</head> 
<body onLoad="onLoad()"> 
    <button onclick="capturePhoto();">Capture Photo</button> <br><br> 
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br><br> 
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br><br> 
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br><br> 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 
    <img style="display:none;" id="largeImage" src="" /> 
    <br><button onclick="captureImage();">Capture Image</button> <br> 

配置。 xml

<?xml version="1.0" encoding="UTF-8"?> 
<widget xmlns  = "http://www.w3.org/ns/widgets" 
xmlns:gap = "http://phonegap.com/ns/1.0" 
id  = "com.phonegap.getting.started" 
version  = "1.0.0"> 

<name>bla</name> 

<description> 
    bla 
</description> 

<author href="http://bla.github.com" 
    email="[email protected]"> 
    bla 
</author> 

<icon src="icon.png" gap:role="default" /> 

<feature name="http://api.phonegap.com/1.0/geolocation"/> 
<feature name="http://api.phonegap.com/1.0/network"/> 
    <feature name="http://api.phonegap.com/1.0/file"/> 
    <feature name="http://api.phonegap.com/1.0/camera"/> 
    <feature name="http://api.phonegap.com/1.0/media"/> 
    <feature name="http://api.phonegap.com/1.0/device"/> 

    <feature name="http://api.phonegap.com/1.0/notification"/> 
    <feature name="http://api.phonegap.com/1.0/battery"/> 

<preference name="orientation" value="portrait" /> 
<preference name="webviewbounce" value="false" /> 
<preference name="prerendered-icon" value="true" /> 
    <preference name="phonegap-version" value="2.0.0" /> 

    <preference name="fullscreen" value="false" /> 
    <preference name="stay-in-webview" value="false" /> 
    <preference name="ios-statusbarstyle" value="default" /> 
    <preference name="android-minSdkVersion" value="7" /> 
    <preference name="android-installLocation" value="internalOnly" /> 
    <preference name="target-device" value="universal" /> 
    <preference name="autohide-splashscreen" value="true" /> 
    <preference name="load-url-timeout" value="60000" /> 
    <preference name="show-splashscreen-spinner" value="true" /> 
    <preference name="show-splash-screen-spinner" value="true" /> 
    <preference name="allow-inline-media-playback" value="false" /> 
    <preference name="launch-mode" value="standard" /> 


    <plugin name="Capture" value="CDVCapture" /> 
    <plugin name="Camera" value="CDVCamera" /> 
</widget> 

谢谢!给所有帮助过的人:)

+0

很高兴听到它的作品:) – Arun

+0

你如何测试这个工作?你是通过网络在手机上完成的,还是需要先在Phonegap Build中构建它 – AMG

1

我没有与iOS任何经验,但我认为更好的你做一个简单的代码来打开相机类似

 


    navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
     destinationType: Camera.DestinationType.FILE_URI }); 

    function onSuccess(imageURI) { 
     var image = document.getElementById('myImage'); 
     image.src = imageURI; 
    } 

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

 

如果能正常工作添加您进一步代码一步一步来。

这些偏好使用XML

<preference name="orientation" value="landscape" /> 
    <preference name="fullscreen" value="false" /> 
    <preference name="phonegap-version" value="2.0.0" /> 
    <preference name="webviewbounce" value="false" /> 
    <preference name="stay-in-webview" value="false" /> 
    <preference name="ios-statusbarstyle" value="default" /> 
    <preference name="android-minSdkVersion" value="7" /> 
    <preference name="android-installLocation" value="internalOnly" /> 
    <preference name="prerendered-icon" value="false" /> 
    <preference name="target-device" value="universal" /> 
    <preference name="autohide-splashscreen" value="false" /> 
    <preference name="load-url-timeout" value="60000" /> 
    <preference name="show-splashscreen-spinner" value="true" /> 
    <preference name="show-splash-screen-spinner" value="true" /> 
    <preference name="allow-inline-media-playback" value="false" /> 
    <preference name="launch-mode" value="standard" /> 

    <plugin name="Camera" value="CDVCamera" /> 
    <feature name="http://api.phonegap.com/1.0/camera"/> 
    <feature name="http://api.phonegap.com/1.0/file"/> 
    <feature name="http://api.phonegap.com/1.0/media"/> 
    <feature name="http://api.phonegap.com/1.0/notification"/> 
    <feature name="http://api.phonegap.com/1.0/battery"/> 
    <feature name="http://api.phonegap.com/1.0/device"/> 

+0

生病尝试使用您的代码来代替。 brb 在旁注:我试着用android的替换为ios的cordova.js。我的代码完美无缺地工作... – FlyingHippo

+0

不。结果是完全一样的。在按下“捕获图像”后,我必须在切换到相机之前对主页按钮进行双击:( – FlyingHippo

+0

您可以检查设备准备好的事件是否工作完美?您还有哪个版本的ios?cordova 2.3.0下载iOS 4.x支持并且仅支持iOS 5.0及更高版本,向前发展。 – Arun

0

尝试增加身体标记您的文档和类似:

<body onLoad="onLoad()"> 

然后装置就绪监听器添加到的onLoad功能:

function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } 

这是因为您需要确保在检查设备就绪状态之前加载所有DOM元素。

+0

他的设备就绪状态正在触发,您可以阅读之前的评论。 – Arun

+0

这是,但它是完整的DOM负载之前发射?因为如果它是,下面的函数可能试图与尚未加载的元素进行交互。这是我的观点 –

1

这可能是由于下载的PhoneGap版本和Camera的示例代码不匹配造成的。 您可以在Phonegap.com的右上方栏中查看相机示例代码版本,如下面的屏幕截图所示。

enter image description here

相关问题