Javascript Phonegap摄像头API-无法读取属性'；数据URL'；未定义的_Javascript_Android_Cordova_Android Camera_Phonegap Build

Javascript Phonegap摄像头API-无法读取属性'；数据URL'；未定义的

javascript android cordova

Javascript Phonegap摄像头API-无法读取属性'；数据URL'；未定义的,javascript,android,cordova,android-camera,phonegap-build,Javascript,Android,Cordova,Android Camera,Phonegap Build,我正在使用Phonegap创建一个Android应用程序我已经使用他们网站上的命令安装了phonegap SDK和Emulator的一切都已启动并运行现在，当我从他们的网站上运行示例相机脚本以使其工作时，我开始使用它每次我运行下面的代码（即使我将文件链接到phonegap.js），它都会不断抛出错误。我的意思是，脚本运行到HTML并显示按钮，但是当单击按钮时，什么也没有发生，并且在日志中显示：无法读取未定义的属性“DATA_URL” <!DOCTYPE html> &l

我正在使用Phonegap创建一个Android应用程序

我已经使用他们网站上的命令安装了phonegap

SDK和Emulator的一切都已启动并运行

现在，当我从他们的网站上运行示例相机脚本以使其工作时，我开始使用它

每次我运行下面的代码（即使我将文件链接到phonegap.js），它都会不断抛出错误。我的意思是，脚本运行到HTML并显示按钮，但是当单击按钮时，什么也没有发生，并且在日志中显示：无法读取未定义的属性“DATA_URL”

    <!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="phonegap.js"></script>
        <link rel="stylesheet" href="css/foundation.css" />
        <script src="js/vendor/modernizr.js"></script>
        <title>Retouch</title>
        <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
        //
        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
        //
        function onPhotoDataSuccess(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 onPhotoFileSuccess(imageData) {
          // Get image handle
          console.log(JSON.stringify(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 = 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() {
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
            destinationType: destinationType.DATA_URL });
        }

        function capturePhotoEdit() {
          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: navigator.camera.DestinationType.FILE_URI,
         sourceType: pictureSource
    });

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

        </script>
    </head>
    <body>
      <!-- Navigation bar -->
        <div class="fixed">
          <nav class="top-bar fixed" data-topbar>
            <ul class="title-area">
              <li class="name">
                <h1 class="navmsg">
                  <script>
                  var Digital=new Date()
                  var hours=Digital.getHours()

                  if (hours>=5&&hours<=11)
                  document.write('<b>Good Morning.</b>')
                  else if (hours==12)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=13&&hours<=17)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=18&&hours<=20)
                  document.write('<b>Good Evening.</b>')
                  else if (hours>=21&&hours<=11)
                  document.write('<b>Hello!</b>')
                  else
                  document.write('<b>Hello!</b>')
                  </script>
                </h1>
              </li>
              <li class="toggle-topbar menu-icon"><a href="#">Account</a></li>
            </ul>
          </nav>
        </div>

        <button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
        <button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</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="" />

        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script>
          $(document).foundation();
        </script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>`

到

仍然没有运气的功能。我怀疑这与cordova插件和phonegap有关，因为脚本中只包含phonegap.js。我还阅读了config.xml中的设置，这是我在文档后面通过命令行完成的（除非我做得不对）

我已通过CL构建了应用程序：

phonegap build android

下面添加了cordova-2.5.0.js和destinationType.FILE_URI的代码已成功启用getPhoto（）函数，并允许我在库/相册中显示照片

    <!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="phonegap.js"></script>
        <link rel="stylesheet" href="css/foundation.css" />
        <script src="js/vendor/modernizr.js"></script>
        <title>Retouch</title>
        <script type="text/javascript" charset="utf-8" src="cordova-2.5.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
            //alert(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) {
            alert("inside large image")
            // 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.FILE_URI });
        }

        // 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.FILE_URI });
        }

        // 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>
      <!-- Navigation bar -->
        <div class="fixed">
          <nav class="top-bar fixed" data-topbar>
            <ul class="title-area">
              <li class="name">
                <h1 class="navmsg">
                  <script>
                  var Digital=new Date()
                  var hours=Digital.getHours()

                  if (hours>=5&&hours<=11)
                  document.write('<b>Good Morning.</b>')
                  else if (hours==12)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=13&&hours<=17)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=18&&hours<=20)
                  document.write('<b>Good Evening.</b>')
                  else if (hours>=21&&hours<=11)
                  document.write('<b>Hello!</b>')
                  else
                  document.write('<b>Hello!</b>')
                  </script>
                </h1>
              </li>
              <li class="toggle-topbar menu-icon"><a href="#">Account</a></li>
            </ul>
          </nav>
        </div>

        <button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
        <button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</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="" />

        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script>
          $(document).foundation();
        </script>
    </body>
</html>

它们似乎都不起作用。

更新只是我最近也遇到了同样的问题。如果你添加了摄像头插件和所有需要的权限，主要是你完成了所有的步骤。我认为您的解决方案可以转到您的项目文件夹并执行
phonegap构建
或
phonegap构建应用程序平台
。首先保存您的项目数据，使命令行重置项目的结构并删除您添加的文件
让我知道这是否也适用于你，祝你好运。
更新只是我最近也遇到了同样的问题。如果你添加了摄像头插件和所有需要的权限，主要是你完成了所有的步骤。我认为您的解决方案可以转到您的项目文件夹并执行
phonegap构建
或
phonegap构建应用程序平台
。首先保存您的项目数据，使命令行重置项目的结构并删除您添加的文件

让我知道这是否也适用于您，祝您好运。
这是一个Javascript错误。您正在尝试访问未定义变量的属性。此行（在
capturePhoto
和
capturePhotoEdit
方法中）：
应该是：

Camera.DestinationType.DATA_URL

还有一件事：使用Cordova时，最好手头有文档，每次使用新插件或升级到新版本时都可以查看文档（它们往往会频繁更改API，因此Google中的示例通常显示遗留代码）。这是一个Javascript错误。
。您正在尝试访问未定义变量的属性。此行（在
capturePhoto
和
capturePhotoEdit
方法中）：
应该是：

Camera.DestinationType.DATA_URL

还有一件事：使用Cordova时，最好手头有文档，每次使用新插件或升级到新版本时都可以查看文档（它们往往会频繁更改API，因此Google中的示例通常显示遗留代码）。这里有。
在我暂停执行时，摄影机有getPicture（）方法，但没有DestinationType和PictureSourceType属性

$scope.tomarFoto = function(){ $ionicPlatform.ready(function() { var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA }; $cordovaCamera.getPicture(options).then(function (imageData) { $scope.cameraimage = "data:image/jpeg;base64," + imageData; }, function (err) { console.log('Failed because: ' + message); }); });

在我的例子中，当我暂停执行时，相机有getPicture（）方法，但没有DestinationType和PictureSourceType属性

$scope.tomarFoto = function(){ $ionicPlatform.ready(function() { var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA }; $cordovaCamera.getPicture(options).then(function (imageData) { $scope.cameraimage = "data:image/jpeg;base64," + imageData; }, function (err) { console.log('Failed because: ' + message); }); });

我没有对Cordova per say做任何事情，但我通过终端安装了Phonegap，创建了一个项目，然后将摄像头脚本实现到一个名为camera.html的文件中。我按原样添加了JS脚本并运行了脚本。日志中不断出现这四个函数的错误。我运行了“phonegap build android”并成功构建了软件包，但在访问摄像头时仍然没有成功。然后它只是一个不同的问题，引发了相同的错误。我已经让库和相册功能正常工作，但摄像头仍然无法工作。最后一次尝试：找到
camera.js
并像
phonegap.js
一样导入到您的html中。我没有对Cordova进行任何操作，但我通过终端安装了phonegap，创建了一个项目，然后将摄像头脚本实现到一个名为camera.html的文件中。我按原样添加了JS脚本并运行了脚本。日志中不断出现这四个函数的错误。我运行了“phonegap build android”并成功构建了软件包，但在访问摄像头时仍然没有成功。然后它只是一个不同的问题，引发了相同的错误。我已经让库和相册功能正常工作，但摄像头仍然无法工作。请在最后一次机会尝试：查找
camera.js
并导入到您的html中，如
phonegap.js
我应该包括cordova.js还是phonegap.js？自从我使用phonegap命令创建应用程序以来，它没有自动将cordova.js包含在我的项目目录中。我以前使用模板示例项目创建项目，因此我不熟悉新的CLI命令。但是由于cordova.js是特定于平台的，并且
create
命令没有将平台作为参数，我想稍后会在
build
命令中添加它。所以我不需要手动添加它？它将通过build.xml处理？我已经手动将cordova的插件行添加到我的config.xml文件中，我是否需要在构建文件中添加任何内容。杜德，我复制了粘贴了你的“Camera.DestinationType.DATA_URL”，但最后应该是和“I”。根据phonegap和cordova的文档，可能的值是DATA_URL，文件URI和本机URI。我应该包括cordova.js还是phonegap.js？自从我使用phonegap命令创建应用程序以来，它没有自动将cordova.js包含在我的项目目录中。我以前使用模板示例项目创建项目，因此我不熟悉新的CLI命令。但是因为cordova.js是平台规范
destinationType.FILE_URI destinationType.DATA_URI Camera.desitnationType.DATA_URI

destinationType.DATA_URL

Camera.DestinationType.DATA_URL

$scope.tomarFoto = function(){ $ionicPlatform.ready(function() { var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA }; $cordovaCamera.getPicture(options).then(function (imageData) { $scope.cameraimage = "data:image/jpeg;base64," + imageData; }, function (err) { console.log('Failed because: ' + message); }); });