Question

我的ios第一个phonegap / cordova应用程序出现了一个奇怪的问题

我复制粘贴的例子 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="blabla@gmail.com">
        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" />

有没有人知道我做错了什么？

Answer 1

YES！我终于得到了它的工作，我从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>

config.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="bla@gmail.com">
    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>

谢谢！对每个帮助过的人:)。

Answer 2

我对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"/>

Answer 3

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

enter image description here

Answer 4

尝试在文档中添加正文标记，例如：

<body onLoad="onLoad()">

然后将设备就绪监听器添加到onLoad函数：

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

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

Phonegap / Cordova没有显示相机

4 个答案: