2013-01-09 60 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

相關問題