Cordova - 为什么 camera.getpicture 不起作用？答案

【问题标题】：Cordova - Why is camera.getpicture not working?Cordova - 为什么 camera.getpicture 不起作用？
【发布时间】：2014-05-14 15:00:50
【问题描述】：

我正在尝试让相机功能正常工作。我正在连接的三星 Galaxy 平板电脑上进行测试。应用程序启动成功，但navigator.camera.getpicture 没有启动相机。你能帮忙吗？

以下是我遵循的步骤：我在 (Windows 7) 上使用以下步骤创建了一个 cordova hello 项目：

A 部分：（设置 cordova） （来自this answer here 的步骤）： C:> npm install -g cordova

在命令提示符下，导航到您要创建项目的文件夹：

cordova create hello com.example.hello HelloWorld
cd hello
Define the OS you want to suppport for example:

cordova platform add wp8
Install plugins (If needed). For example we want the following:

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.media-capture
cordova plugin add org.apache.cordova.media

B 部分：添加用于测试相机功能的代码 （来自Cordova camera docs的代码）将 index.html 代码替换为以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.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() {
            alert('taking photo');
            // 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>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

C 部分：在连接的设备上运行应用程序（Samsung Galaxy 标签）

cordova run android

应用程序在平板电脑上成功启动，但 index.html 中的按钮无法启动相机。为什么是这样？我不知道如何调试这种情况。你能对此有所了解吗？

【问题讨论】：

标签： android cordova camera

【解决方案1】：

我不知道你为什么有src="cordova-2.2.0.js"，只需将其更改为src=cordova.js，它应该可以工作。

有关调试，请查看adb logcat。

【讨论】：

是的，我在发布问题后不久发现了同样的问题。不过，感谢您查看代码并回答。